1. 思路
怎么用CSS畫一個(gè)帶陰影的三角形呢 ? 有童鞋說(shuō), 這還不簡(jiǎn)單嗎 網(wǎng)上有很多解決方案, 但其實(shí)大多都是實(shí)現(xiàn)不太完美的, 存在一些問題
假設(shè)我們做一個(gè)向下的三角形箭頭 常見的方法大致有兩種
方法一可以畫三角形, 但是畫陰影是很難做到的(如果做到的朋友, 歡迎給我留言)
2. 設(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)很明顯, 我們不能通過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)方法, 下面我們看一看 tranform 方法是如何解決的
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)效果:
3. 最終解決方案代碼
<!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); } .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>如果你有更好的實(shí)現(xiàn)辦法, 歡迎給我留言
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
作者：zzzmj
原文出處：https://juejin.im/post/5c7cb3e4e51d454a0c384305
新聞熱點(diǎn)
疑難解答
圖片精選
