Zenn
Open2

18. clip-pathのpolygon()には範囲外の座標を指定可能

CSS
たかもそたかもそ

https://x.com/takamosoo/status/1681274353072345090

0% より小さい座標や 100% より大きい座標のように範囲外の値にも対応しています。

<div class="hexagon"></div>

.hexagon {
  aspect-ratio: cos(30deg); 
  inline-size: 180px;
  background-color: #313135;
  clip-path: polygon(
    -50% 50%,
    50% 100%,
    150% 50%,
    50% 0
  );
}