css伪元素:before和:after,实现三角形
七娃博客572 次
之前写过css伪类实现切三角形的方法,今天再复习一次,很多东西不用就会忘,所以还是经常使用或者回顾的好!
我们都知道三角的实现是根据border的边框来设置的,一个方向有填充色,另外几个方向变成透明色transparent ,就可以实现了,css及效果如下图
width:0; border-top:40px solid red; border-bottom:40px solid green; border-left:40px solid blue; border-right:40px solid yellow;
那么用before和after的实现方式一样,没有多大区别,例如:
p:before{ display:block; content:''; width:0; border-width:15px 8px 8px 8px; border-style:solid; border-color:red transparent transparent transparent; position:absolute; left:60px;top:70px; }
案例中,在伪类里面设置:块级、空内容、宽度为0,以及最重要的三角形的边框高度(上右下左的顺序,上案例中第一个为15px,高于其余边,所以效果如刚开始的红色三角一样,朝下的三角的角相对更尖锐)、边框属性solid,最后是边框色,对应的角填充颜色即可;
箭头朝向css的颜色,与填充色的反向相反哦,具体如下:
border-color:red transparent transparent transparent;/*下*/ border-color: transparent red transparent transparent;/*左*/ border-color: transparent transparent red transparent;/*上*/ border-color:transparent transparent transparent red ;/*右*/
版权声明:原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。
转载请注明来源:css伪元素:before和:after,实现三角形 - Qui-Note
评论 | 0 条评论