* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  width: 100%;
}

section {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;

  & > div {
    height: 200px;
    width: 200px;
    background: #e2e2e2;
    & > div {
      height: 100%;
      width: 100%;
    }
  }
}

/* basic */
.shape-1 {
  background: #000000;
  clip-path: circle();
}

.shape-2 {
  background: #bb0000;
  clip-path: circle(50px at 100px 100px);
}

.shape-3 {
  background: #cc00aa;
  clip-path: circle(50% at 0 0);
}

.shape-4 {
  background: #ddaabb;
  clip-path: circle(50% at bottom right);
}
/* basic */

/* shapes */

.ellipse {
  background: #000000;
  clip-path: ellipse(70px 100px at 40% 40%);
}

.ellipse-center {
  background: #0000aa;
  clip-path: ellipse(80px 70px at center);
}

.inset {
  background: #bb00bb;
  clip-path: inset(20px);
}

.inset-multi-radius {
  background: #ccaadd;
  clip-path: inset(20px 10px 30px 10px round 20px 0);
}
/* shapes */

/* polygon */
.polygon {
  background: #000000;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}
/* polygon */

.path {
  background: #000000;
  clip-path: path(
    "M 10,40 L 70,40 A 10,10 0,0,0 80,30 L 80,10 A 10,10 0,0,1 90,0 L 140,0 A 10,10 0,0,1 150,10 L 150,190 A 10,10 0,0,1 140,200 L 10,200 A 10,10 0,0,1 0,190 L 0,50 A 10,10 0,0,1 10,40 Z"
  );
}