css伪元素:before和:after,实现三角形

之前写过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 ;/*右*/

赞(0) 打赏
未经允许不得转载:版权所有@七娃设计室七娃博客 » css伪元素:before和:after,实现三角形
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

七娃设计,让设计贴近生活

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏