Zenn
Open1

76. box-shadowで一方向の影

CSS
たかもそたかもそ

CSSの box-shadow で一方向にのみ影を落としたいとき、clip-path で影を切り取ることで実現できます。

<div class="shadow"></div>

.shadow {
  position: relative;
  aspect-ratio: 1;
  inline-size: 150px;
  
  &::before {
    position: absolute;
    inset: 0;
    content: '';
    box-shadow: 0 0 15px 5px rgb(0 0 0 / 50%);
    clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
  }
}