如何用CSS3生成直角梯形，原理是什么？

如何用CSS3生成直角梯形，原理是什么？

上下左右4条边，最关键的一点：每两条边的相交处是斜线的相交的。

如果不渲染成斜线，那么写浏览器内核解析css的程序员要纠结了：上边该压着左边线还是右边线，谁压谁都不合理啊，最简单的是弄成斜线等分，还不必去写判断谁该压着谁的程序代码。

于是，就给用边框创造梯形、三角形留下了空间，其他三条边颜色设置为透明或none，剩下的就是梯形或三角了，至于直角梯形，第6个div是，观察第4个div的 none 起了什么作用，再看div6，相信你就明白了。上图的代码：
<div id="div1">1</div><div id="div2">2</div><div id="div3">3</div><div id="div4">4</div><div id="div5">5</div><div id="div6">6</div><style>div{ float: left;margin: 10px; border-top: 30px red solid; border-bottom: 30px blue solid; border-left: 30px yellow solid; border-right: 30px green solid;}#div1{width: 0;height: 0;}#div2{width: 30px;height: 0;}#div3{width: 30px;height: 30px;}#div4{ width: 30px; border-top: none;}#div5{ border-top: transparent 30px solid; border-bottom: 30px blue solid; border-left: transparent 30px solid; border-right: transparent 30px solid;}#div6{ width: 50px; height: 0; border-top: none; border-bottom: 40px blue solid; border-left: transparent 30px solid; border-right: none;}</style>2016-06-08

上下左右4条边，最关键的一点：每两条边的相交处是斜线的相交的。

如果不渲染成斜线，那么写浏览器内核解析css的程序员要纠结了：上边该压着左边线还是右边线，谁压谁都不合理啊，最简单的是弄成斜线等分，还不必去写判断谁该压着谁的程序代码。

于是，就给用边框创造梯形、三角形留下了空间，其他三条边颜色设置为透明或none，剩下的就是梯形或三角了，至于直角梯形，第6个div是，观察第4个div的 none 起了什么作用，再看div6，相信你就明白了。上图的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>
<div id="div6">6</div>

<style>
div{
float: left;margin: 10px;
border-top: 30px red solid;
border-bottom: 30px blue solid;
border-left: 30px yellow solid;
border-right: 30px green solid;
}

#div1{width: 0;height: 0;}
#div2{width: 30px;height: 0;}
#div3{width: 30px;height: 30px;}

#div4{
width: 30px;
border-top: none;
}

#div5{
border-top: transparent 30px solid;
border-bottom: 30px blue solid;
border-left: transparent 30px solid;
border-right: transparent 30px solid;
}

#div6{
width: 50px; height: 0;
border-top: none;
border-bottom: 40px blue solid;
border-left: transparent 30px solid;
border-right: none;
}
</style>2016-06-08

不过丰华股份法国恢复2016-06-16

直角梯形是指有一个直角的梯形。梯形两腰既不相等也不平行，两底平行，但不相等，一个腰上的两角都是直角。2016-06-23