1、利用CSS實現(xiàn)一個三角形
1.1實現(xiàn)思路
（1）將元素的寬度和高度設置為0，同時設置4個邊的顏色和寬度，出現(xiàn)4個三角形。
（2）將其中3個邊設置為透明。
1.2源代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS實現(xiàn)三角形</title>
<style type="text/css">
.div1{
width: 0px;
height: 0px;
border-top: 100px solid red;
border-bottom:100px solid yellow;
border-left:100px solid blue;
border-right: 100px solid gray;
}
.div-top{
width: 0px;
height: 0px;
border-top: 100px solid transparent;
border-bottom:100px solid yellow;
border-left:100px solid transparent;
border-right: 100px solid transparent;
float: left;
}
.div-bottom{
width: 0px;
height: 0px;
border-top: 100px solid red;
border-bottom:100px solid transparent;
border-left:100px solid transparent;
border-right: 100px solid transparent;
float: left;
}
.div-left{
float: left;
width: 0px;
height: 0px;
border-top: 100px solid transparent;
border-bottom:100px solid transparent;
border-left:100px solid transparent;
border-right: 100px solid gray;
}
.div-right{
float: left;
width: 0px;
height: 0px;
border-top: 100px solid transparent;
border-bottom:100px solid transparent;
border-left:100px solid blue;
border-right: 100px solid transparent;
}
</style>
</head>
<body>
<h3>1、將元素的寬度和高度設置為0 ，設置4個邊的顏色和寬度。出現(xiàn)4個三角形。</h3>
<div class="div1"></div>
<h3>2、設置3個變透明</h3>
<div class="div-top"></div>
<div class="div-right"></div>
<div class="div-bottom"></div>
<div class="div-left"></div>
</body>
</html>
1.3運行效果
CSS三角形
2、CSS 導航下邊三角形
2.1實現(xiàn)效果
效果
2.2實現(xiàn)思路
（1）使用一個div中，放置3個div內容、紅色三角形、藍色三角形。
（2）設置div的布局為相對定位，設置紅色和藍色三角形的盒子為絕對定位。
（3）設置紅色三角形盒子top:50%，y軸偏移到中間，但是盒子并不是在中間，通過margin-top:-20px. 向上偏移三角形的一半，這樣紅色三角形正好到中間。
（4）設置藍色三角形盒子left:50%，x軸偏移到中間，但是盒子并不是在中間，通過margin-left:-20px. 向走偏移三角形的一半，這樣藍色三角形正好到中間。
2.3源代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS實現(xiàn)三角形</title>
<style type="text/css">
body{
margin: 0px;
}
.div{
width: 200px;
height: 200px;
margin-left: 100px;
margin-top: 100px;
position: relative;
}
.div .content{
width: 200px;
height: 200px;
border: 1px solid red;
}
.div .right{
position: absolute;
left: 200px;
top: 50%;
width: 0px;
height: 0px;
border-left: 20px solid red;
border-right: 20px solid transparent;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
margin-top: -20px;
}
.div .bottom{
position: absolute;
left: 50%;
top : 200px;
width: 0px;
height: 0px;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid blue;
border-bottom: 20px solid transparent;
margin-left: -20px;
}
</style>
</head>
<body>
<div class="div">
<div class="content"></div>
<div class="right"></div>
<div class="bottom"></div>
</div>
</body>
</html>
