Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

【css】clip-pathに影をつける(出来た)

はじめに

clip-pathで作った六角形に、六角形の影(外側)をつけたかった。
けど出来なかった話。出来た。

参考
box-shadowだけじゃない!CSSでできる色々な影の表現と意外に知らない落とし穴
Hexi-Flexi

結論

box-shadowdrop-shadow擬似要素を使った影
これらではダメだった。
drop-shadowで出来ました。

box-shadow

html
<div class="hex shadow"></div>
css
.hex {
    background-color: cornflowerblue;
    position: relative;
    height: 400px;
    width: 347.23416px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.shadow {
    box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
}

スクリーンショット 2020-06-18 16.59.29.png

そもそも影が出ない。

drop-shadow

同じく影が出ない。

html
<div class="shadow">
    <div class="hex"></div>
</div>
css
.shadow {
    filter: drop-shadow(30px 10px 4px #000000);
}

filterの使い方を間違えていた。
親要素にdrop-shadowをつけたら出来ました。

スクリーンショット 2020-06-23 15.26.39.png

擬似要素

css
.shadow::after {
    content: '';
    z-index: -1;
    background-color: #000000;
    position: absolute;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
    filter: blur(150px);
    transform: translate(10%, 10%) scale(1.05);
}

スクリーンショット 2020-06-18 17.23.56.png

clip-pathに切り取られて外に出れない。
z-indexも仕事していない。

結局 出来たから結局ではない

影を外付けにした。
z-indexを効かせるためだけに。

html
<div class="hex"></div>
<div class="shadow"></div>
css
.shadow {
    content: '';
    z-index: -1;
    background-color: #000000;
    display: block;
    position: absolute;
    top: 0px;
    left:0px;
    height: 400px;
    width: 347.23416px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); 
    filter: blur(150px);
    transform: translate(10%, 10%) scale(1.05);
}

スクリーンショット 2020-06-18 17.57.28.png

  • 親子じゃないからたくさん直打ち設定しないといけない
    • topleftheightwidth、六角形にするためのclip-path
  • clip-pathに切り取られてブラーもほぼ仕事してない

影はついたが望まぬ形だったため使えなかった、諦め。

おわり

正六角形の 長い方(今回は高さ):短い方(今回は幅)は2:√3。
なので2:√3の長方形を用意してそれをclip-pathで切り取ると綺麗な正六角形ができる。

okochi
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away