CSSで作った三角形に影をつけるのは沼だった

某商業施設でこんな感じの装飾がついた看板（というかPOP）を見たので、どれCSSでやってみよう。
と思ったら沼でした。
まぁ備忘録ですね。

[1-1]　※スクリーンショット
こんな感じの見た目になります

HTML

<div class="banner01">
            <div class="sample01">
                <img class="bg_img" src="img/test.png">
            
                <div class="sample02"></div> 

                <div class="heading01"><p>7.10<br>OPEN</p></div>
                
                <div class="sample03"><p>北海道<br>初出店</p></div>

            </div>

            <h2><img src="img/logo.svg"></h2>

            <div class="heading02">
                <p class="h_small">自分だけの組み合わせ</p>
                <p class="h_regular">マカロンラボ</p>
                <p class="h_small">スイーツ[サウス B1]</p>
            </div>
  </div>

CSS

.banner01{
  width: 400px;
  height: auto;
  margin: 1rem;
}

.sample01{
  position: relative;
  width: 400px;
  height: 250px;
}

.sample01 img{
  width: 384px;
  height: 234px;
  object-fit: cover;
  object-position: right top;
  margin: 8px;
  z-index: 1;
}

.sample02{
  position: absolute;
  top: 0;
  left: 0;

  /*三角形を作る*/
  border-left: 120px solid #179977;
  border-bottom: 80px solid transparent;

  /*影をつける*/
　　　　filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.5));

  z-index: 2;
}

.heading01{
  position: absolute;
  top: 0.8rem;
  left: 0.5rem;

  color: #fff;
  text-align: center;
  font-size: normal;
  font-weight: bold;
  line-height: 105%;

  transform: rotate(-33deg);
    -moz-transform: rotate(-33deg);
    -webkit-transform: rotate(-33deg);
  z-index: 3;
}

.sample03{
  position: absolute;
  bottom: -9px;
  right: -2px;

  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: #ef8e00;
  clip-path: polygon(50% 0%, 65% 32%, 98% 35%, 76% 61%, 79% 91%, 50% 80%, 21% 91%, 28% 60%, 2% 35%, 36% 31%);
}

.sample03 p{
  color: #fff;
  margin-top: 8px;/*星形の下に隙間があるのでalign-itemsだとちょっとズレる*/
  font-size: small;
  line-height: 1.15rem;
}

.banner01 h2{
  display: flex;
  justify-content: center;
}

h2 img{
  height: 50px;
}

.heading02{
  color: #171f2c;
  line-height: 1.15rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  margin-top: 8px;
}

.h_small{
  font-size: small;
}

.h_regular{
  font-weight: bold;
  margin-bottom: 0.25rem;
}

備忘録

最初はclip-pathとfilter: drop-shadowを組み合わせてたんですがどうにも無理で、調べてみたら四角いエリアを座標指定して切ってる様に見せているので影が付けれないことを知りました。

余計なオブジェクトのない三角形を作ろうとするとborderになるのかな、と思います。
.svgに頼るのもなんだか悔しくて試行錯誤した結果こうなりました。

z-indexはダメおしで使ってます。
結果的に色々なプロパティを使って図形を作れたのは楽しかったです。

改めてCSSは沼ですわ…。

参考サイト

CSSで三角形を作る方法【左上・右上・右下・左下自由自在に配置】

星形のclip-pathはここから↓

Clippy — CSS clip-path maker