css clip-path 的基本使用

clip-pathCSS属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径，或者作为一个形状例如circle().。clip-path属性代替了现在已经弃用的剪切clip属性，总的来说clip-path就是用来把不想要的部分给拆剪掉。

这里我主要是讲clip-path 中polygon（）函数属性的使用，其实很简单，里面传入多个x,y坐标，例如polygon（50% 50%）就确定了下面这一个点

继续传入一对(x,y)值，例如polygon（50% 50% ，100% 100%）两个值之间用逗号隔开

继续传入一对(x,y)值，例如polygon（50% 50% ，100% 100% ，0%，100%）

最后把三个点连接起来就成了如下所示的图了

最后配上基本代码

<!DOCTYPE html>

<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <style>
    .triangles {
      width: 200px;
      height: 200px;
      background-color: black;
      clip-path: polygon( 50% 0% ,100% 100%,0% 100% );
    }
  </style>
</head>

<body>
  <div class="triangles"></div>
</body>

</html>

好了，这就是clip-path 最基本的使用了，第一次用画图工具画图，有点不好看，大家就将就着点看吧，哈哈哈

发布于 2020-01-14 10:17

CSS