用CSS畫一個帶陰影的三角形

zzzmj發表於2019-03-04
CSS

1. 思路

怎麼用CSS畫一個帶陰影的三角形呢 ? 有童鞋說, 這還不簡單嗎 網上有很多解決方案, 但其實大多都是實現不太完美的, 存在一些問題

假設我們做一個向下的三角形箭頭 常見的方法大致有兩種

  1. 通過邊框控制, border-left和border-right設為透明, border-top設為預定的顏色即可
  2. 通過 transform 旋轉盒子

2. 設計

2.1 邊框法

在這裡插入圖片描述
html結構

<body>
    <div class="box"></div>
</body>
複製程式碼

css樣式

.box {
    position: relative;
    width: 200px;
    height: 100px;
    background: #ff8605;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}
.box::after {
    content: '';
    position: absolute;
    bottom: -9px;
    left: 45px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ff8605;
}
複製程式碼

缺點很明顯, 我們不能通過box-shadow的方式來設定陰影, 陰影會是一個盒子

但如果不用設陰影, 只是需要邊框的話, 我們可以再定義一個偽類元素, 覆蓋到三角形的下面即可

.box::before {
    position: absolute;
    bottom: -10px;
    left: 45px;
    content: '';
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(0, 0, 0, .1);
}
複製程式碼

如圖所示

在這裡插入圖片描述

如果要求不嚴格似乎也夠用了. 但作為一個嚴格的前端工程師! 我們還是不能容忍這種實現方法

正確的姿勢是使用濾鏡(filter)中的drop-shadow()

drop-shadow才是真正意義上的投影，而box-shadow只是盒陰影 它只會投影出真實圖形的陰影

.box::after {
    position: absolute;
    bottom: -9px;
    left: 45px;
    content: '';
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #ff8605;
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
}
複製程式碼

用CSS畫一個帶陰影的三角形

(濾鏡方法是評論區的童鞋提出來的, 感謝~~)

2.2 transform方法

這種方法的思路就是使用transform旋轉盒子, 一半被上面的容器遮擋, 一半顯示出來

.box::before {
    position: absolute;
    bottom: -5px;
    left: 45px;
    content: '';
    width: 10px;
    height: 10px;
    background: #ff8605;
    transform: rotate(135deg);
    box-shadow: 1px -2px 2px rgba(0, 0, 0, .2);
}
複製程式碼

在這裡插入圖片描述

我們似乎實現了我們想要的結果, 但是, 其實是存在一個問題的, 但因為我們的陰影面積不夠大, 所以圖片上看起來不明顯

當我們把box-shadow的陰影面積擴大時, 我們發現到問題的所在了

在這裡插入圖片描述

盒子突出來了, 那怎麼解決呢

我們再定義一個與容器顏色相同的盒子, 將上半部分蓋住就可以啦.

/* transform方法 */
.box::before {
    position: absolute;
    bottom: -5px;
    left: 45px;
    content: '';
    width: 10px;
    height: 10px;
    background: #ff8605;
    transform: rotate(135deg);
    box-shadow: 1px -2px 5px rgba(0, 0, 0, .2);
}
.box::after {
    position: absolute;
    bottom: 0px;
    left: 40px;
    content: '';
    width: 20px;
    height: 20px;
    background: #ff8605;
}
複製程式碼

要注意三角形應該用before定義, 覆蓋的盒子應該用after定義, 這樣盒子才能覆蓋到三角形上面

實現效果:

在這裡插入圖片描述

當然這種方法有可能影響盒子內的內容

3. 最終解決方案程式碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>CSS實現帶陰影效果的三角形</title>
        <style>
            .box {
                position: relative;
                width: 200px;
                height: 100px;
                background: #ff8605;
                box-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
            }
            
            /* drop-shadow */
            .box::after {
                position: absolute;
                bottom: -9px;
                left: 45px;
                content: '';
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-top: 10px solid #ff8605;
                filter: drop-shadow(1px 3px 1px rgba(0, 0, 0, .2));
            }
            
            /* tranform */
            .box::before {
                position: absolute;
                bottom: -5px;
                left: 45px;
                content: '';
                width: 10px;
                height: 10px;
                background: #ff8605;
                transform: rotate(135deg);
                box-shadow: 1px -2px 5px rgba(0, 0, 0, .2);
            }
            
            .box::after {
                position: absolute;
                bottom: 0px;
                left: 40px;
                content: '';
                width: 20px;
                height: 20px;
                background: #ff8605;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>
複製程式碼

如果你有更好的實現辦法, 歡迎給我留言

相關文章