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

har01d2024-09-07 18:07

html 复制代码

<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>

css 复制代码

.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%
  );
}