- 實(shí)現(xiàn)三角形赂弓，原理：塊級元素枢里，邊框被分成了上下左右四分孽鸡，需要顯示的地方加上顏色，不需要顯示的設(shè)置為透明色栏豺。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.triang {
width: 0px;
border: 20px solid transparent;
border-top: 20px solid red;
border-bottom: 20px solid green;
}
</style>
<body>
<div class="triang">
</div>
</body>
</html>
截圖：
trangle.png
- 實(shí)現(xiàn)凸起的三角形樣式彬碱，原理：底下是一個黑色邊框的三角形，覆蓋上一個白色的后奥洼，三角形中間的顏色被覆蓋巷疼，三角形的邊留了下來。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.triang {
position: absolute;
border: 20px solid transparent;
}
</style>
<body>
<div class="triang" style="border-bottom-color: #000000; "></div>
<div class="triang" style="border-bottom-color: #ffffff"></div>
</body>
</html>
截圖：
trangle.png
