![パソ君](https://jito-site.com/wp-content/uploads/2022/02/computer09_question.png)
・clip-pathに影をつける方法は?
こんな疑問にお答えします。
デザインによっては、clip-pathを使って多角形や斜めの四角形を作る場面ありますよね。
で、その要素に影がつくこともあるかと。
ただclip-pathを使った場合、普通に指定しても影をつけることができません。。
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
ちょっと違うやり方をする必要あり!
ということで、この記事では「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」を使う
- 疑似要素を要素より下の重なり順にする
順に解説してきます。
![](https://jito-site.com/wp-content/uploads/2023/10/c0dd9cd3a744a2f1200817d2b41664a9.png)
まず影をつけたい要素に対して、背景色をなくしておきます。
.square02 {
display: flex;
justify-content: center;
align-items: center;
height: 150px;
width: min(100%, 150px);
padding: 20px;
margin-inline: auto;
color: #fff;
}
![](https://jito-site.com/wp-content/uploads/2023/10/54610481add583da87849017eeb49a03.png)
続いてその要素に対して、box-shadowではなく「filter: drop-shadow」を指定します。
.square02 {
~~~~
filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
}
![](https://jito-site.com/wp-content/uploads/2023/10/3ecfc7d4f9f3b5bac4215ec87a213629.png)
そしたら疑似要素を作成しましょう。
大きさは要素と同じになるように指定。さらに要素につけるはずだった背景色を、この疑似要素につけます。
.square02 {
~~~~
/* 疑似要素の位置関係のためposition: relativeをつける */
position: relative;
}
.square02::before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: orange;
}
(要素の上に疑似要素があるため、文字は現状隠れております)
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
要素に対して「position: relative;」を忘れずにつけよう!
![](https://jito-site.com/wp-content/uploads/2023/10/712e2ca18277c2eadbc87d18f39fdb54.png)
ここで疑似要素に対して「clip-path」を使います。
するとクリッピングしながらの、その部分に影をつけることができました。
.square02::before {
~~~~
clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
}
![](https://jito-site.com/wp-content/uploads/2023/10/a6cb0ca36eac7be5ce8b6792b3d3af7f.png)
あとは重なり順を指定するだけ。
今、疑似要素の方が要素より上にあるため、テキストが隠れています。
そのため「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を指定しました。
良ければ参考にどうぞ!
![](https://jito-site.com/wp-content/uploads/2023/05/96d5b9f2229c6254ee85083d7cbcb88b-1-160x160.png)
【解説】CSSでclip-pathに影(shadow)をつける【サンプルあり】:まとめ
- 要素の背景色を指定しない
- 要素に対して「filter: drop-shadow」を使う
- 同じ大きさの疑似要素を作成して背景色をつける
- 疑似要素に対して「clip-path」を使う
- 疑似要素を要素より下の重なり順にする
![ジト](https://jito-site.com/wp-content/uploads/2022/02/image.jpg)
clip-pathに影(shadow)をつけたい時はためしてみてね!