圖片
1
圖片.png
代碼：
<style>
.triangle{
width: 0;
border-top: 30px solid blue;
border-right: 30px solid yellow;
border-bottom: 30px solid green;
border-left: 30px solid red;
}
</style>
<body>
<div class="triangle"></div>
</body>
2
圖片.png
代碼：
<style>
.triangle{
width: 0;
border-top: 30px solid blue;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid transparent;
}
</style>
<body>
<div class="triangle"></div>
</body>
3
圖片.png
代碼：
<style>
.triangle{
width: 0;
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid transparent;
border-left: 30px solid red;
}
</style>
<body>
<div class="triangle"></div>
</body>
4
圖片.png
代碼：
<style>
.triangle{
width: 0;
border-top: 30px solid transparent;
border-right: 30px solid yellow;
border-bottom: 30px solid transparent;
border-left: 30px solid transparent;
}
</style>
<body>
<div class="triangle"></div>
</body>
同樣的以此類推
5
圖片.png
代碼：
<style>
.triangle{
width: 0;
border-top: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid red;
border-left: 30px solid red;
}
</style>
<body>
<div class="triangle"></div>
</body>
注意：
1外邓，可以使用span這樣的行內(nèi)元素設(shè)置border ，設(shè)置span為絕對定位古掏，父包含塊為相對定位损话，就可以不用為span添加寬度，也可以不用非要使用塊級(jí)元素冗茸。
2席镀，要顯示某個(gè)邊框時(shí)，他對應(yīng)邊框可以不用設(shè)置
例子：
圖片.png
當(dāng)只給span設(shè)置border時(shí)夏漱，只有下邊框可以正常顯示為一個(gè)三角形
圖片.png
案例
一豪诲，span行內(nèi)元素設(shè)置border(代碼更簡潔優(yōu)雅)
圖片.png
圖片.png
法一：通過兩個(gè)三角形塊遮蓋代碼
法二：通過旋轉(zhuǎn)正方形（帶邊框），利用它的一個(gè)角
二挂绰，div塊級(jí)元素設(shè)置border
1屎篱，
圖片.png
代碼
2，
圖片.png
代碼
3葵蒂，
圖片.png
代碼
