・clip-pathに影をつける方法は？
こんな疑問にお答えします。
デザインによっては、clip-pathを使って多角形や斜めの四角形を作る場面ありますよね。
で、その要素に影がつくこともあるかと。
ただclip-pathを使った場合、普通に指定しても影をつけることができません。。
ちょっと違うやり方をする必要あり！
ということで、この記事では「CSSでclip-pathに影（shadow）をつける」について解説していきます！
・CSSでclip-pathに影（shadow）をつける
・CSSでclip-pathにborderを実装しつつ影（shadow）をつける
目次
【解説】CSSでclip-pathに影（shadow）をつける【そのままやると・・】
clip-pathを使った要素に対して、box-shadowを指定しても影がつきません。。
そのサンプルがこちら↓
See the Pen clip-pathに影➀ by jito-coder (@jito-coder) on CodePen.
影がついていませんよね。
ですが下記コードのように、実際box-shadowを指定しています。
<div class="square01">
四角形
</div>
<div class="polygon01">
多角形
</div>.square01 {
/* 省略 */
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}
.polygon01 {
/* 省略 */
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}このように普通に指定しても影がつきません。
【解説】CSSでclip-pathに影（shadow）をつける【サンプルあり】
一工夫すればclip-pathに対して影をつけることができます。
それが「疑似要素」＋「filtter(drop-shadow)」を用いることです。
サンプルがこちら↓
See the Pen clip-pathに影➁ by jito-coder (@jito-coder) on CodePen.
<div class="square02">
四角形
</div>
<div class="polygon02">
多角形
</div>.square02 {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
width: min(100%, 150px);
padding: 20px;
margin-inline: auto;
color: #fff;
filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
position: relative;
}
.square02::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background-color: orange;
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
}コードの中で重要な点がこちら↓
- 要素の背景色を指定しない
- 要素に対して「filter: drop-shadow」を使う
- 同じ大きさの疑似要素を作成して背景色をつける
- 疑似要素に対して「clip-path」を使う
- 疑似要素を要素より下の重なり順にする
順に解説してきます。
まず影をつけたい要素に対して、背景色をなくしておきます。
.square02 {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
width: min(100%, 150px);
padding: 20px;
margin-inline: auto;
color: #fff;
}
続いてその要素に対して、box-shadowではなく「filter: drop-shadow」を指定します。
.square02 {
~~~~
filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
}
そしたら疑似要素を作成しましょう。
大きさは要素と同じになるように指定。さらに要素につけるはずだった背景色を、この疑似要素につけます。
.square02 {
~~~~
/* 疑似要素の位置関係のためposition: relativeをつける */
position: relative;
}
.square02::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: orange;
}（要素の上に疑似要素があるため、文字は現状隠れております）
要素に対して「position: relative;」を忘れずにつけよう！
ここで疑似要素に対して「clip-path」を使います。
するとクリッピングしながらの、その部分に影をつけることができました。
.square02::before {
~~~~
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
}
あとは重なり順を指定するだけ。
今、疑似要素の方が要素より上にあるため、テキストが隠れています。
そのため「z-index」を用いて下にしましょう。
.square02::before {
~~~~
z-index: -1;
}これで「clip-path」を使いつつ、その部分に影をつける実装ができました！
clip-pathでborderに影をつけてみた！
最後に自分用のメモとして、borderつきのclip-pathに対して影をつけてみました。
サンプルがこちら↓
See the Pen clip-pathに影➂ by jito-coder (@jito-coder) on CodePen.
とはいっても疑似要素をもう一つ作成して、無理やりborderっぽくさせてるだけです。
.square03::after {
content: "";
display: block;
width: calc(100% + 10px);
height: calc(100% + 10px);
position: absolute;
top: -5px;
left: -5px;
z-index: -2;
background-color: orange;
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
}widthとheightを少し大きめ（＋10px）に指定して、はみ出した部分をborderっぽくしております。
均一にはみ出すために、topとleftには10pxの半分の5pxを指定。
そして一番下の重なり順にするために、z-indexは-2を指定しました。
良ければ参考にどうぞ！
【解決】png透過画像に影（box-shadow）をつける方法【CSS】 【解説】CSSでclip-pathに影（shadow）をつける【サンプルあり】：まとめ
- 要素の背景色を指定しない
- 要素に対して「filter: drop-shadow」を使う
- 同じ大きさの疑似要素を作成して背景色をつける
- 疑似要素に対して「clip-path」を使う
- 疑似要素を要素より下の重なり順にする
clip-pathに影（shadow）をつけたい時はためしてみてね！
