【CSS3】一些好看的clip-path（一）

har01d

已于 2024-09-03 10:43:14 修改

阅读量36

点赞数 1

文章标签： css3 前端 css

于 2024-09-03 10:43:02 首次发布

本文链接：https://blog.csdn.net/weixin_43951592/article/details/141855356

版权

在这里插入图片描述

<div class="box">
 <div class="p1"></div>
 </div>
 <div class="box">
   <div class="p2"></div>
 </div>
 <div class="box">
   <div class="p3"></div>
 </div>
 <div class="box">
   <div class="p4"></div>
 </div>

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px;
  div {
    width: 74px;
    height: 74px;
    background-color: rgb(255, 255, 255);
  }
}
.p1 {
  clip-path: polygon(
    16.6% 16.6%,

    33.3% 0%,
    50% 16.6%,
    66.6% 0%,

    83.3% 16.6%,

    100% 33%,
    83.3% 50%,
    100% 66.6%,

    83.3% 83.3%,

    66.6% 100%,
    50% 83.3%,
    33.3% 100%,

    16.6% 83.3%,

    0% 66.6%,
    16.6% 50%,
    0% 33%
  );
}
.p2 {
  clip-path: polygon(
    20% 20%,

    33.3% 0%,
    50% 16.6%,
    66.6% 0%,

    80% 20%,

    100% 33%,
    83.3% 50%,
    100% 66.6%,

    80% 80%,

    66.6% 100%,
    50% 83.3%,
    33.3% 100%,

    20% 80%,

    0% 66.6%,
    16.6% 50%,
    0% 33%
  );
}
.p3 {
  clip-path: polygon(
    23.3% 23.3%,

    33.3% 0%,
    50% 16.6%,
    66.6% 0%,

    76.6% 23.3%,

    100% 33%,
    83.3% 50%,
    100% 66.6%,

    76.6% 76.6%,

    66.6% 100%,
    50% 83.3%,
    33.3% 100%,

    23.3% 76.6%,

    0% 66.6%,
    16.6% 50%,
    0% 33%
  );
}
.p4 {
  clip-path: polygon(
    26.6% 26.6%,

    33.3% 0%,
    50% 16.6%,
    66.6% 0%,

    73.3% 26.6%,

    100% 33%,
    83.3% 50%,
    100% 66.6%,

    73.3% 73.3%,

    66.6% 100%,
    50% 83.3%,
    33.3% 100%,

    26.6% 73.3%,

    0% 66.6%,
    16.6% 50%,
    0% 33%
  );
}