|
阅读：3208回复：0
border属性实现三角形及梯形
用border属性画三角形
给定一个宽度和高度都为 0 的元素，其 border 的任何值都会直接相交 .san {
width: 0px;
height: 0px;
border: 100px solid;
border-color: orange plum yellow yellowgreen;
}效果展示：
可以根据border这个特性来绘制三角形。如果想要一个指向上面的三角形，可以让 border 的下边可见，其他边都设置为透明： .san {
height: 0px;
width: 0px;
border-top: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid coral;
}效果展示：
也可以实现等边三角形 .san {
width: 0;
height: 0;
border-left: 23px solid transparent;
border-right: 23px solid transparent;
border-bottom: 40px solid coral;
}效果展示：
用border属性画梯形 利用border加粗实现梯形 .ti { width: 60px; height: 0px; border-width: 100px; border-style: solid; border-color: transparent transparent skyblue transparent; } 效果展示： |
|
公众号
