使用clip-path polygon()画一个多边形

tomla2024-07-08 15:16

clip-path CSS 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。

polygon()定义一个多边形（使用一个 SVG 填充规则和一组顶点）。

关于polygon()参数坐标系

举个栗子，clip-path: polygon(0 0, 50% 20%, 100% 0, 100% 100%, 0 100%);，括号中的每对参数分别代表在坐标系中x轴和y轴的坐标，将这个栗子中的每个点画在坐标系中，就像下面这样

共五个点，分别为：

0 0
50% 20%
100% 0
100% 100%
0 100%

将坐标系中每个点连接起来，形成一个闭合图形，如下图所示：

CSS实战

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    .demo{
      width: 100px;
      height: 100px;
      background-color: aquamarine;
      clip-path: polygon(0 0, 50% 20%, 100% 0, 100% 100%, 0 100%);
    }
  </style>
</head>
<body>
  <div class="demo"></div>
</body>
</html>

代码运行结果：