[分享]css做三角型

CSS是一种很有用的工具，可以实现很多有趣的效果。其中一个有趣的效果就是做三角形。

 .triangle {
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 100px solid red;
 } 

上面这段代码就是实现三角形的CSS。首先，我们需要定义一个元素的宽度和高度都为0，这是因为我们需要使用border属性来构建三角形。然后，我们定义左右两侧的border为50px的透明边框，底部的border为100px的红色边框。这样，就构成了一个向上的三角形。

如果想要构建不同方向的三角形，只需要更改相应的border即可。

 .triangle-up {
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-bottom: 100px solid red;
 }
 .triangle-down {
   width: 0;
   height: 0;
   border-left: 50px solid transparent;
   border-right: 50px solid transparent;
   border-top: 100px solid red;
 }
 .triangle-left {
   width: 0;
   height: 0;
   border-top: 50px solid transparent;
   border-right: 100px solid red;
   border-bottom: 50px solid transparent;
 }
 .triangle-right {
   width: 0;
   height: 0;
   border-top: 50px solid transparent;
   border-left: 100px solid red;
   border-bottom: 50px solid transparent;
 } 

上面的代码分别是构建向上、向下、向左、向右的三角形。只需要改变相应的border方向和宽度，就可以构建不同形状的三角形。

总的来说，CSS做三角形非常方便，只需要定义一个元素的宽度和高度为0，然后使用border属性构建边框即可。同时，CSS也能够实现很多其他有趣的效果，让我们的页面更加生动有趣。