はてなブックマーク

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: #00C