CSS绘制三角形主要用到的是border(边框)属性。
div {
width: 0;
height: 0;
border: 100px solid;
border-color: orange blue red green;
}
效果图:
根据border这个特性来绘制三角形:
一、
div {
width: 0;
height: 0;
border: 100px solid rgba(0, 0, 0, 0);
border-top: 100px solid red;
}
效果图:
二、
div {
width: 0;
height: 0;
border: 100px solid rgba(0, 0, 0, 0);
border-bottom: 100px solid red;
}
效果图:
三、
div {
width: 0;
height: 0;
border: 100px solid rgba(0, 0, 0, 0);
border-left: 100px solid red;
}
效果图:
四、
div {
width: 0;
height: 0;
border: 100px solid rgba(0, 0, 0, 0);
border-right: 100px solid red;
}
效果图: