CSS繪製三角形圖標目錄
1CSS繪製三解形圖標原理
對內容容器進行相對定位，對內容容器的僞元素:before和:after進行絕對定位，設置top、right、bottom、left來控制三角形的繪製位置，設置僞元素:before和:after的寬高均爲0，並定義上右下左邊框樣式，此時上右下左的邊框線變成了4個三角形，通過設置某些邊的邊框顏色透明實現三角形隱藏，從而實現三角形圖標的繪製。
2 頁面效果
3 HTML結構
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS繪製三角形圖標</title>
<link rel="stylesheet" href="css/triangle.css" />
</head>
<body>
<div class="wrap">
<span class="icon-triangle-all"></span>
<span class="icon-triangle-top"></span>
<span class="icon-triangle-right"></span>
<span class="icon-triangle-bottom"></span>
<span class="icon-triangle-left"></span>
</div>
</body>
</html>
4 CSS樣式
.wrap{
position: relative;
margin-top: 50px;
height: 60px;
padding: 20px;
background-color: #2f2f2f;
box-shadow: 5px 7px 6px rgba(0,0,0,.1);
}
span:before,span:after{
content: "";
position: absolute;
width: 0;
height: 0;
border: 20px solid transparent;
}
span.icon-triangle-all:before{
left: 60px;
border-color: #390 #f30 #36f #ff3;
}
span.icon-triangle-top:before{
left: 120px;
border-top-color: #390;
}
span.icon-triangle-right:before{
left: 180px;
border-right-color: #f30;
}
span.icon-triangle-bottom:before{
left: 240px;
border-bottom-color: #36f;
}
span.icon-triangle-left:before{
left: 300px;
border-left-color: #ff3;
}