css transform 三角形

CSS中有一种很有趣的样式属性叫做transform，可以用来对元素进行各种变形操作。其中，transform配合使用rotate可以实现制作三角形的效果。

  .triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid #000;
    transform: rotate(360deg);
  }

以上是一个制作黑色三角形的代码示例，该元素宽高都为0，通过border属性设置三角形的形状，其中left和right的宽度都为50px，bottom的高度为100px，颜色为黑色。而transform的rotate属性则是为了将三角形旋转360度，使它能正常显示。

除了这种基础的实现方式，我们还可以通过其他方式来制作三角形。比如，利用rotate和skew配合使用，可以让一个正方形变为一个等腰三角形。

  .triangle {
    width: 50px;
    height: 50px;
    transform: rotate(45deg) skew(-20deg);
    background-color: #000;
  }

以上代码中，我们先设置了一个宽高都为50px的正方形，然后利用rotate将它旋转45度，再通过skew对它进行斜切-20度的操作，使原先正方形的两个腰变成了等腰三角形的两条边，最后设置一下背景颜色就能制作出纯色的等腰三角形。

以上就是利用CSS transform制作三角形的常用方法，效果简单而实用。CSS的不断发展和更新，相信在未来也会有更多、更高级的实现方式。