CSS中小三角的设置常用于标签或菜单上,本文将介绍几种设置方法。第一种设置方法:利用border属性。.example1{ width: 0; height: 0; border-top: 10px
CSS中小三角的设置常用于标签或菜单上,本文将介绍几种设置方法。
第一种设置方法:利用border属性。
.example1{ width: 0; height: 0; border-top: 10px solid transparent; border-right: 10px solid #999; border-bottom: 10px solid transparent; }
利用border属性的特性,我们将对角线方向的border设为透明,通过右边的border实现小三角。上下border可控制小三角的大小。
第二种设置方法:利用伪元素before或after。
.example2{ position: relative; } .example2::before{ content: ""; position: absolute; left: 0; top: 50%; border-right: 10px solid #999; border-top: 10px solid transparent; border-bottom: 10px solid transparent; transform: translateY(-50%); }
利用伪元素before在标签内插入一个元素,通过绝对定位和transform属性使其位于标签左侧中央,再通过border实现小三角。同样利用上下border控制大小。
第三种设置方法:利用clip-path。
.example3{ clip-path: polygon(0 0, 0 30%, 70% 30%, 70% 0, 100% 50%, 70% 100%, 70% 70%, 0 70%); background-color: #999; }
通过clip-path属性定义多边形裁剪区域,实现小三角。可通过调整多边形点的坐标和个数控制大小和形状。
以上是几种常用的小三角设置方法,具体实现视需求而定。
粉丝
0
关注
0
收藏
0