|
怎么用CSS畫一個(gè)帶陰影的三角形呢 ? 有童鞋說(shuō), 這還不簡(jiǎn)單嗎 網(wǎng)上有很多解決方案, 但其實(shí)大多都是實(shí)現(xiàn)不太完美的, 存在一些問題 假設(shè)我們做一個(gè)向下的三角形箭頭 常見的方法大致有兩種 1.通過(guò)邊框控制, border-left和border-right設(shè)為透明, border-top設(shè)為預(yù)定的顏色即可
2.通過(guò) transform 旋轉(zhuǎn)盒子 設(shè)計(jì)
2.1 邊框法 
html結(jié)構(gòu) <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;
}
缺點(diǎn)很明顯, 我們不能通過(guò)box-shadow的方式來(lái)設(shè)置陰影, 陰影會(huì)是一個(gè)盒子 但如果不用設(shè)陰影, 只是需要邊框的話, 我們可以再定義一個(gè)偽類元素, 覆蓋到三角形的下面即可 .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);
}
如圖所示 
如果要求不嚴(yán)格似乎也夠用了. 但作為一個(gè)嚴(yán)格的前端工程師! 我們還是不能容忍這種實(shí)現(xiàn)方法 正確的姿勢(shì)是使用濾鏡(filter)中的drop-shadow() drop-shadow才是真正意義上的投影，而box-shadow只是盒陰影 它只會(huì)投影出真實(shí)圖形的陰影 .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));
}
2.2 transform方法 這種方法的思路就是使用transform旋轉(zhuǎn)盒子, 一半被上面的容器遮擋, 一半顯示出來(lái) .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);
}
我們似乎實(shí)現(xiàn)了我們想要的結(jié)果, 但是, 其實(shí)是存在一個(gè)問題的, 但因?yàn)槲覀兊年幱懊娣e不夠大, 所以圖片上看起來(lái)不明顯 當(dāng)我們把box-shadow的陰影面積擴(kuò)大時(shí), 我們發(fā)現(xiàn)到問題的所在了 
盒子突出來(lái)了, 那怎么解決呢 我們?cè)俣x一個(gè)與容器顏色相同的盒子, 將上半部分蓋住就可以啦. /* 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;
}
要注意三角形應(yīng)該用before定義, 覆蓋的盒子應(yīng)該用after定義, 這樣盒子才能覆蓋到三角形上面 實(shí)現(xiàn)效果: 
當(dāng)然這種方法有可能影響盒子內(nèi)的內(nèi)容 最終解決方案代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>CSS實(shí)現(xiàn)帶陰影效果的三角形</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>
|
