[分享]css做三角形的原理

CSS是前端开发中一个非常重要的技术，使用CSS可以实现许多炫酷的效果。其中之一就是通过CSS制作三角形。//制作三角形 .triangle { width: 0; height: 0; border...

CSS是前端开发中一个非常重要的技术，使用CSS可以实现许多炫酷的效果。其中之一就是通过CSS制作三角形。

//制作三角形
.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid #f00;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
} 

上面的代码就是一个简单的制作三角形的例子。这里讲一下制作三角形的原理。

首先要了解的是CSS中盒模型的特性。一个元素可以通过设置边框大小为0，而利用四个边框的不同颜色和大小组合成为多边形，利用上面代码的样式就可以得到一个三角形。在样式中，设置了一个红色的上边框，大小为50px，左右边框设置为透明，形成了三角形的形状。由于没有设置高度和宽度，所以需要使用限制宽高的祖先元素包裹这个三角形才可以显示。

另外，在实际应用中，也可以通过CSS3的特性来制作三角形。可以利用transform属性中的绕Z轴旋转的特性来得到一个等腰三角形。

//利用CSS3制作三角形
.triangle2 {
    width: 0;
    height: 0;
    border-color: transparent transparent #f00 transparent;
    border-style: solid;
    border-width: 50px 50px 0 50px;
    transform: rotate(45deg);
} 

在上面的代码中，利用了边框不同颜色和线宽的特性得到了三角形的形状。利用transform的rotate(45deg)将其绕Z轴旋转45度即可得到等腰三角形。

以上就是关于CSS制作三角形的原理的一些简单介绍。