你可能还不知道的CSS好用属性：clip-path

如何用 css 实现三角形？

你是不是还在用这种方式，利用 border 的 color 属性来实现三角形。

.triangle {
    width: 0;
    height: 0;
    border: 5px solid #000;
    border-color: transparent transparent #000 transparent;
}
复制代码

今天给大家介绍一个 css 中的一个不是很常用的属性 clip-path 来实现一个三角形。

.polygon {
     width: 100px；
     height: 100px;
     background-color: red;
     clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
复制代码

了解clip-path

顾名思义，『剪裁』，它可以按照 svg 路径、盒子模型、基本多边形路径等几种不同的方式来裁切。clip-path 有几大类，分别为：

• basic-shape： 基本图形，包括