css三角如何写

CSS三角形可以在网页布局中起到很好的装饰和分割作用，下面就介绍一些常见的方法来创建CSS三角形。

1. border属性创建三角形

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

2. transform属性创建三角形

.triangle {
   width: 0;
   height: 0;
   border: 50px solid transparent;
   transform: rotate(45deg);
   border-top-color: red;
} 

3. :before和:after伪元素创建三角形

.triangle {
   position: relative;
   width: 100px;
   height: 100px;
}
.triangle:before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   border: 50px solid transparent;
   border-top-color: red;
   transform-origin: left top;
   transform: rotate(-45deg);
}
.triangle:after {
   content: "";
   position: absolute;
   right: 0;
   top: 0;
   border: 50px solid transparent;
   border-top-color: red;
   transform-origin: right top;
   transform: rotate(45deg);
} 

通过以上三种方式，可以轻松地实现各种形状的三角形，如等边三角形、直角三角形、等腰三角形等。