css如何实现三角形
三角形元素在网页中到处可见,对于三角形的实现方法也不同,有的可能直接用图片,但是很多情况下没有必要,那我们可能就会选择使用css来实现三角形。对于三角形的css实现,我所熟知的有两种:
1、使用三个透明的边和一个实体的边来实现一个三角形,代码如下:
1 2 3 4 5 6 | .arrow{ width: 0; height: 0; border: 10px solid transparent; border-top-color: #f1f1f1; } |
这种实现有一定的缺陷,就是三角形是单一颜色的。
2、通过正方形旋转,然后调节位置控制部分隐藏来实现。
1 2 3 4 5 6 | .arrow{ width: 10px; height: 10px; border: 1px solid #f1f1f1; transform: rotate(-45deg); } |
这种方法相对较好,我一般用这种,可以做出三角和边线连接的效果。