<main>
  <h2>Basic Clip Paths</h2>
  <ul>
    <li></li>
    <li class="circle"></li>
    <li class="circle-2"></li>
    <li class="ellipse"></li>
    <li class="ellipse-wide"></li>
    <li class="inset"></li>
    <li class="inset-rounded"></li>
    <li class="wide-rectangle"></li>
    <li class="parallelogram"></li>
    <li class="triangle"></li>
    <li class="triangle-2"></li>
    <li class="pentagon"></li>
    <li class="star"></li>
  </ul>
</main>

.circle::after {
  /* circle with a 2rem radius, at center of element */
  clip-path: circle(2rem);
}
.circle-2::after {
  /* circle with a 20% radius, centered offset from the top right */
  clip-path: circle(50% at 100% 1rem);
}
.ellipse::after {
  /* tall ellipse, at center of element */
  clip-path: ellipse(20% 50%);
}
.ellipse-wide::after {
  /* tall ellipse, offset near bottom of element */
  clip-path: ellipse(50% 20% at 50% 90%);
}
.inset::after {
  clip-path: inset(10% 10% 25% 20%);
}
.inset-rounded::after {
  clip-path: inset(10% 10% 25% 20% round 10%);
}
.wide-rectangle::after {
  /* wide rectangle */
  clip-path: polygon(0% 20%, 100% 20%, 100% 60%, 0% 60%);
}
.parallelogram::after {
  clip-path: polygon(25% 20%, 90% 20%, 70% 90%, 5% 90%);
}
.triangle::after {
  /* triangle */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.triangle-2::after {
  /* triangle */
  clip-path: polygon(70% 10%, 2% 40%, 95% 90%);
}
.pentagon::after {
  clip-path: polygon(20% 100%, 80% 100%, 100% 35%, 50% 0%, 0% 35%);
}
.star::after {
  clip-path: polygon(10% 100%, 50% 0%, 90% 100%, 0% 35%, 100% 35%);
}

li {
  aspect-ratio: 1;
  margin: auto;
  width: 100%;
  position: relative;
  border: 0.25vmin dashed hsl(188 100% 80% / 30%);
}
li::before {
  position: absolute;
  inset: 0;
  content: "";
  z-index: 1;
}
.trig::before {
  border: 0.25vmin dotted hsl(188 100% 80% / 30%);
  border-radius: 50%;
}
li::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(135deg, hsl(188 100% 50%), hsl(218 100% 60%));
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 5vmin;
  background: repeating-linear-gradient(
      0deg,
      hsl(344 100% 90% / 4%) 0 0.2vmin,
      hsl(234 100% 60% / 0%) 0 2vmin
    ),
    linear-gradient(45deg, hsl(344 100% 50%), hsl(234 100% 60%));

  color: hsl(188 100% 90%);
  letter-spacing: 0.05em;
}
ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20vmin, 1fr));

  gap: 5vmin;
  place-items: stretch;
  margin: 0 auto 5vmin;
  padding: 0;
  list-style: none;
}

* {
  box-sizing: border-box;
}