CSSでclip-pathにshadowをつける方法

0

canvasなどの技術を使用しなくてもCSSのみでも多角形などを作成できます。
clip-pathのpolygonを使って写真を斜めにカットしているサイトも多く見受けられるようになってきました。
今回は、「clip-path」に対して影（shadow）をつけるにはどうしたら可能かというのを解説します。

box-shadow では影（shadow）がつかない

最初は失敗例です。単純にclip-pathの要素に対して、box-shadowを指定してあげれば良いのではと思うかもしれません。しかし、clip-pathの性質上、影の部分がちょうどカットされてしまいます。

サンプル

CODE

// html
<div class="clip-path-hexagon box-shadow" style="width: 200px;height: 173px;background-color: #00CC99;">
</div>

// CSS
.box-shadow {
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}
.clip-path-hexagon {
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

 

clip-pathに影(shadow)をつける方法

clip-pathをwrapする要素を作成し、filterを使用することで影をつけることができます。

サンプル

CODE

// html
<div class="clip-path-shadow">
    <div class="clip-path-hexagon" style="width: 200px; height: 173px; background-color: #00cc99;"></div>
</div>

// CSS
.clip-path-hexagon {
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.clip-path-shadow {
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
}

 
ちょっと一手間かかりますが、影をつけることができました。
clip-pathは便利ですね。今回は六角形を作ってみましたが、色々な形状を作成することができます。
また、filterも結構使える場面が多いです。両方とも機会があれば掘り下げて解説したいですね。

CSS/SASSのおすすめ書籍

CSSやSCSSは基本がわかればあとはGoogle先生で調べた方が早いと思います。CSSの仕組みやSASSの使い方だけわかれば基本はOKです。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座
htmlの基礎から学べるのでおすすめ

Web制作者のためのSassの教科書
SASSの基本が学べます。