css 利用 clip-path 裁剪多边形，三角形，梯形，六边形等

2021-09-26 18:33:31 阅读：213 来源： 互联网

标签：裁剪 clip 100% 50% content path css

clip-path介绍

clip-path可以把一个div元素裁剪成不同的形状，换句话说，可以把div元素不想要的部分剪掉。
clip-path从每个点的坐标着手，沿坐标的路径进行裁剪。

circle裁剪圆形

circle(半径 at 圆心x坐标圆心y坐标)

.content {
  width: 200px;
  height: 200px;
  background: #e4c1db;
  color: #fffded;
  font-size: 24px;
  letter-spacing: 6px;
  clip-path: circle(50% at 50% 50%);
}

ellipse裁剪椭圆形

ellipse(长轴半径短轴半径 at 圆心x坐标圆心y坐标)

.content {
  width: 200px;
  height: 200px;
  background: #e4c1db;
  color: #fffded;
  font-size: 24px;
  letter-spacing: 6px;
  clip-path: ellipse(50% 25% at 50% 50%);
}

inset裁剪内置矩形

ellipse(上右下左边距 round 上右下左圆角)

clip-path: inset(20px 20px 30px 40px round 10px 20px 50px 20px);

polygon裁剪多边形

公共代码（下方裁剪不同的多边形时只需修改polygon里的值）：

<div class="content flex-column">
  <span>HAPPY</span>
</div>

.content {
  width: 200px;
  height: 200px;
  background: #e4c1db;
  color: #fffded;
  font-size: 24px;
  letter-spacing: 6px;
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}
.flex-column {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

clip-path 裁剪三角形

.content {
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
}

clip-path 裁剪梯形

.content {
  clip-path: polygon(100% 0,75% 100%, 25% 100%, 0 0);
}

clip-path 裁剪六边形

.content {
  clip-path: polygon(75% 0,100% 50%,75% 100%, 25% 100%,0 50%, 25% 0);
}

标签：裁剪,clip,100%,50%,content,path,css
来源： https://www.cnblogs.com/knuzy/p/15338840.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9