CSS实现直角梯形

献上效果图：

代码

<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;

效果图：