献上效果图:
代码
<div class="box"></div>
CSS:
.box {
width: 300px;
height: 0;
border-width: 0px 150px 150px 0px;
border-style: none solid solid;
border-color: transparent transparent rgba(255, 0, 0, 1);
}
解析:
1、放置一个div并为其加上border
div:
<div class="box"></div>
CSS
.box {
width: 300px;
height: 300px;
border-width: 10px 10px 10px 10px;
border-style: solid solid solid solid;
border-color: deepskyblue green red blueviolet;
}
2、任取选一border(在此我选择底部边框),
上边框并不需要,修改
宽度为0px:border-width: 0px 10px 10px 10px;
样式none:border-style: none solid solid solid;
颜色透明:border-color: transparent green red blueviolet;
现在效果如下:
3、右边框不需要显示,但需要占位以做出直角梯形的斜边
修改CSS样式:border-color: transparent transparent red blueviolet;
效果:
4、左边框不需要显示、占位:
修改样式:
边框宽度为0:border-width: 0px 10px 10px 0;
边样式去掉:border-style: none solid solid;
背景去掉:border-color: transparent transparent red;
5、最后调整box高度为0,调整边框宽度
border-width: 0px 150px 150px 0;
border-style: none solid solid;
效果图: