CSS 之 clip-path 绘制多边形

clip-path 表示是裁剪路径

语法格式 clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

clip-source: 可以是内, 外部的 SVG 的 < clip-path > 元素的 URL 引用

basic-shape: 使用一些基本的形状函数创建的一个形状. 主要包括 circle(),ellipse(),inset()和 polygon()

geometry-box: 是可选参数. 此参数和 basic-shape 函数一起使用时, 可以为 basic-shape 的裁剪工作提供参考盒子.

如果 geometry-box 由自身指定, 那么它会使用指定盒子形状作为裁剪的路径, 包括任何 (由 border-radius 提供的) 的角的形状

eg.

<style>
  .box{ width: 500px; height: 500px; background-color: lightblue; border:
  5px solid gray; clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%, 0
  70px) }
</style>
<body>
  <div class="box">
  </div>
</body>

裁剪效果如下:

说明:"()" 中的数据表示, 裁剪边框结点坐标位置, 按照顺时针方向, 这些点连起来的边即为裁剪边框, 围成的平面图形即为裁剪区域

坐标原点为左上角

学习原址: https://www.w3cplus.com/CSS3/introducing-css-clip-path-property.html

来源: http://www.bubuko.com/infodetail-3073184.html

与本文相关文章

暂无,快来抢沙发吧！