css3矩形变多边形属性

CSS3中有一种属性可以将矩形变成多边形，这就是 clip-path 属性。

.example {
    width: 200px;
    height: 200px;
    background-color: #f2f2f2;
    clip-path: polygon(50% 0%,100% 50%,50% 100%,0% 50%);
}

上面的代码会将一个 200x200 的矩形变成一个正方形的四边形，也就是正方形旋转了 45 度。

其中，polygon() 的参数是一系列坐标点，每一对坐标代表一个点。这些点将会连接起来，形成一个多边形的边界。

在示例中，我们定义了四个点，它们代表正方形四个顶点的位置。第一个点的坐标是 50% 0%，代表正方形顶部的中心点。接下来的三个点顺时针旋转了 90 度，形成一个正方形的四边形。

除了 polygon()，还可以使用其他函数来生成不同的多边形：

• circle(): 生成圆形，参数为圆心的坐标和半径。
• ellipse(): 生成椭圆形，参数为中心点的坐标和两个半径。
• inset(): 生成内嵌型多边形，参数为一个矩形的四个边距离外边界的距离。
• path(): 自由绘制多边形，参数为 SVG path 标签的路径字符串。

总之，clip-path 可以帮助我们将矩形变成任意多边形，实现更多样化的布局效果。