用CSS畫一個帶陰影的三角形的示例代碼
阿新 • • 發佈:2019-03-23
xhtml 假設 :after doc col tps left targe ner
?
1. 思路
怎麽用CSS3畫一個帶陰影的三角形呢 ? 有童鞋說, 這還不簡單嗎 網上有很多解決方案, 但其實大多都是實現不太完美的, 存在一些問題
假設我們做一個向下的三角形箭頭 常見的方法大致有兩種
- 通過邊框控制, border-left和border-right設為透明, border-top設為預定的顏色即可
- 通過 transform 旋轉盒子
方法一可以畫三角形, 但是畫陰影是很難做到的(如果做到的朋友, 歡迎給我留言)
2. 設計
2.1 邊框法
html結構
?1 2 3 |
< body >
< div class = "box" ></ div >
</ body >
|
css樣式
?1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.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的方式來設置陰影, 陰影會是一個盒子
但如果不用設陰影, 只是需要邊框的話, 我們可以再定義一個偽類元素, 覆蓋到三角形的下面即可
1 2 3 4 5 6 7 8 9 |
.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 );
}
|
如圖所示
如果要求不嚴格似乎也夠用了. 但作為一個嚴峻的前端工程師! 我們還是不能容忍這種實現方法, 下面我們看一看 tranform
方法是如何解決的
2.2 transform方法
這種方法的思路就是使用transform旋轉盒子, 一半被上面的容器遮擋, 一半顯示出來
?1 2 3 4 5 6 7 8 9 10 11 |
.box::before {
position : absolute ;
bottom : -5px ;
left : 45px ;
content : ‘‘ ;
width : 10px ;
height : 10px ;
background : #ff8605 ;
transform: rotate( 135 deg);
box-shadow: 1px -2px 2px rgba( 0 , 0 , 0 , . 2 );
}
|
我們似乎實現了我們想要的結果, 但是, 其實是存在一個問題的, 但因為我們的陰影面積不夠大, 所以圖片上看起來不明顯
當我們把 box-shadow
的陰影面積擴大時, 我們發現到問題的所在了
盒子突出來了, 那怎麽解決呢
我們再定義一個與容器顏色相同的盒子, 將上半部分蓋住就可以啦.
?1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* transform方法 */
.box::before {
position : absolute ;
bottom : -5px ;
left : 45px ;
content : ‘‘ ;
width : 10px ;
height : 10px ;
background : #ff8605 ;
transform: rotate( 135 deg);
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. 最終解決方案代碼
?1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!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);
}
.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 >
|
用CSS畫一個帶陰影的三角形的示例代碼