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

時間 2019-11-30

標籤 css 一個陰影三角形欄目 CSS 简体版

原文原文鏈接

1. 思路

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

假設咱們作一個向下的三角形箭頭常見的方法大體有兩種html

經過邊框控制, border-left和border-right設爲透明, border-top設爲預約的顏色便可
經過 transform 旋轉盒子

2. 設計

先把三角形畫出來前端

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的方式來設置陰影, 陰影會是一個盒子ui

2.1 邊框法

若是對陰影要求不那麼高，咱們能夠再定義一個僞類元素三角形，只是它的顏色和陰影顏色相近, 把這個影子三角形覆蓋到咱們原來的三角形的下面便可spa

.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);
}
複製代碼

如圖所示設計

優勢是兼容性比較好，要求不嚴格彷佛也夠用了3d

但做爲一個嚴格的前端工程師! 咱們仍是不能容忍這種實現方法code

2.2 濾鏡法

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

filter中的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));
}
複製代碼

很完美的實現了效果，缺點是兼容性可能比較差

filter屬性兼容性

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

2.3 transform方法

這種方法的思路，三角形的陰影使用盒模型陰影咱們不畫三角形，直接畫一個正方形的盒子，再經過transform屬性旋轉45度便可

.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); } /* border法 */ .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); } /* 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>
複製代碼

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。