在製作專案時，遇到了不規則形狀的 tag，我使用了 clip-path 來達成不規則形狀的效果

1	<div class="tag">tag</div>

.tag {
  width: 150px;
  height: 40px;
  background-color: #b84900;
  color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0% 100%);
}

非常完美！

接著希望它可以加上一點陰影，所以加上了 box-shadow

.tag {
  /* ... */
  box-shadow: 5px 5px 5px rgba(0,0,0,0.5)
}

結果會發現並沒有發生任何改變！

發生什麼事了？哪邊弄錯了嗎？

不！這是因為 box-shadow 被 clip-path 給裁剪了

難道用了 clip-path 就沒辦法加上陰影了嗎？

別擔心，還是可以有陰影的，我們只需要調整一下做法！

filter drop-shadow 取代 box-shadow

為了避免陰影被 clip-path 切斷，我們需在 tag 外層多包一層

<div class="tag-box">
  <div class="tag">
    tag
  </div>
</div>

使用 filter drop-shadow，將會沿著形狀創建陰影，如使用 box-shadow 將會是一個矩形，會不符合我們的預期

1
2
3

.tag-box {
  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}

這樣一來就完成囉！

See the Pen Untitled by Lala (@bobee) on CodePen.

🚀線上課程分享

線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。

Hahow

Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住

六角學院

如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！

Udemy

Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。

Lala的前端大補帖

clip-path製作box-shadow陰影無效!?你應該這樣做!

filter drop-shadow 取代 box-shadow

🚀線上課程分享

Hahow

六角學院

Udemy