用CSS畫一個帶陰影的三角形的示例代碼
1. 思路
怎么用CSS畫一個帶陰影的三角形呢 ? 有童鞋說, 這還不簡單嗎 網(wǎng)上有許多解決方案, 但其實(shí)大多都是實(shí)現(xiàn)不太完善的, 存在一些題目
假設(shè)我們做一個向下的三角形箭頭 常見的方法大致有兩種
- 通過邊框控制, border-left和border-right設(shè)為透明, border-top設(shè)為預(yù)定的顏色即可
- 通過 transform 旋轉(zhuǎn)盒子
方法一可以畫三角形, 但是畫陰影是很難做到的(假如做到的同伙, 迎接給我留言)
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;
}
瑕玷很顯明, 我們不能通過box-shadow的體例來設(shè)置陰影, 陰影會是一個盒子
但假如不用設(shè)陰影, 只是必要邊框的話, 我們可以再定義一個偽類元素, 覆蓋到三角形的下面即可
.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)酷好像也夠用了. 但作為一個嚴(yán)厲的前端工程師! 我們照舊不能容忍這種實(shí)現(xiàn)方法, 下面我們看一看 tranform 方法是如何解決的
2.2 transform方法
這種方法的思路就是使用transform旋轉(zhuǎn)盒子, 一半被上面的容器遮擋, 一半表現(xiàn)出來
.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)了我們想要的效果, 但是, 其實(shí)是存在一個題目的, 但由于我們的陰影面積不夠大, 所以圖片上看起來不顯明
當(dāng)我們把 box-shadow 的陰影面積擴(kuò)大時, 我們發(fā)現(xiàn)到題目的所在了
盒子凸起來了, 那怎么解決呢
我們再定義一個與容器顏色雷同的盒子, 將上半部分蓋住就可以啦.
/* 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;
}
要細(xì)致三角形應(yīng)該用 before 定義, 覆蓋的盒子應(yīng)該用 after 定義, 如許盒子才能覆蓋到三角形上面
實(shí)現(xiàn)結(jié)果:
3. 最終解決方案代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>CSS實(shí)現(xiàn)帶陰影結(jié)果的三角形</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)辦法, 迎接給我留言
以上就是本文的悉數(shù)內(nèi)容，盼望對大家的學(xué)習(xí)有所幫助，也盼望大家多多支持圖趣網(wǎng)。
本文地址：http://m.likemindfilms.com/tutorial/wd492.html
