如何用CSS3生成直角梯形,原理是什么?

可以用border来弄,但一直都不懂原理,求解答
2024-12-02 23:45:14
推荐回答(4个)
回答1:

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

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


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

1

2

3

4

5

6


回答2:

上下左右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

1

2

3

4

5

6


回答3:

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

回答4:

不过丰华股份法国恢复

相关问答
最新问答