CSS中的等边三角形是一个非常常用的图形,它可以用来做指示箭头、下拉框等,这里介绍几种制作css等边三角的方法:
1. 利用border属性
.triangle { width: 0; height: 0; border-top: 50px solid transparent; border-left: 50px solid red; border-right: 50px solid transparent; }
2. 利用transform属性
.triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid red; transform: rotate(45deg); }
3. 利用伪元素before和after
.triangle { position: relative; width: 60px; height: 60px; } .triangle:before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 0; border-top: 30px solid red; border-right: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 30px solid transparent; } .triangle:after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0; border-top: 30px solid red; border-right: 30px solid transparent; border-bottom: 30px solid transparent; border-left: 30px solid transparent; }
以上三种方法都可以制作出等边三角形,具体的选择可以根据实际情况来决定,需要注意的是对于后两种方法必须设置元素的position属性为relative或absolute。