border繪製三角形
阿新 • • 發佈：2021-03-13
border: 元素的邊框，實際上border是由三角形組合而成，並不是矩形。
transparent:設為透明。
1.邊框設定不同的背景色
<style> div { width: 0; height: 0; border-top: 20px solid lightblue; border-left: 20px solid lawngreen; border-right: 20px solid lightpink; border-bottom: 20px solid lightsalmon; } </style> <body> <div></div> </body>
效果：
2.等腰三角形
#a{
width: 0;
height: 0;
border:3rem solid;
border-color: blue transparent transparent transparent;
}
<div id="a"></div>
效果：
輪流設定border-color試試
border-color: transparent red transparent transparent;
效果：
3.三角形（隨意設定高、寬）
（1）設定高 top
#a{ width: 0; height: 0; border-top: 10rem solid red; border-left: 6rem solid transparent; } <div id="a"></div>
效果：
（2）設定寬 left
#a{
width: 0;
height: 0;
border-top: 10rem solid red;
border-left: 12rem solid transparent;
}
<div id="a"></div>
效果：
4.任意圖形
#a{ width: 0; height: 0; border-top: 6rem solid red; border-left: 10rem solid transparent; border-right: 10rem solid blue; } <div id="a"></div>
效果：
梯形：
