CSS里显示小三角,或半三角的代码及在线实例推荐 亲测 原创 收藏

文章标签: CSS实例
  • :
  • 01-25 20:18
  • :
  • 10次
  • :
  • 0条
  • 0赞

简介用纯CSS的方法在网页里显示小三角,或者半三角的代码及在线实例。

这是站长自己经常用的一个CSS样式,先来看具体的CSS代码:

.ltitle {position:relative;border-bottom:2px solid currentColor;padding-bottom:0.5rem;letter-spacing: 1px;}
.ltitle:before {content:"";display:inline-block;width:0;height:0;border:.3rem solid transparent;border-left:.3rem solid currentColor;box-sizing: border-box;}

.listtitle {border-bottom:2px solid currentColor;padding-bottom:0.5rem;font-weight:bold;letter-spacing: 1px;}
.listtitle:before {content:"";border:3px solid transparent; border-left:6px solid currentColor;margin-right:5px}

上面的代码里,定义了两个样式,效果如下:

颜色是可以任意控制的,是非常实例的一个CSS标签列表样式的代码,直接用纯CSS的方法,在网页里显示了小三角,或者半三角,下面是在线实例演示:

CSS显示小三角或半三角的在线演示



您正在找的文章可能是: