css 梯形的三种实现方法

转自：https://blog.csdn.net/ChenXvYuan_001/article/details/85016836
https://www.cnblogs.com/linsinan/p/6928734.html
1 利用border加粗方式
这是网上较为常见的方式，其原理就是对一个高度为0px的正方形的div的border-top进行增粗。

HTML:
<div class="d"></div>

CSS:
.d{
    width:80px;
    height: 0;
    border-top:20px solid; 反梯形
    border-left:20px solid transparent;
    border-right:20px solid transparent;
    //border-bottom:20px solid; 正梯形
    box-shadow: 0 0 100px 50px rgba(249, 240, 104,1);
  }
1
2
3
4
5
6
7
8
9
10
11
12
13

理解代码：
建立一个div,高度为0,宽度400px（可以理解为一个矩形，但矩形的高度为0，自然这个矩形就这垂直方向压缩成了一条线），div上边界粗度或厚度设为100px且为实线，左右边界线厚度也为100px，但设为透明（利用了css的transparent属性）

其实这里构造的div就和这两个相框一样，这两个相框实质上就是把一个矩形的border 增粗了，div增粗后上下左右的边界效果就是如相框所示的这样，其实上下左右的border加粗以后就成了4个梯形，然后我将相框的高度设为0，此时这个div就是这样：
然后我将左右边界设为透明
自然就成了一个倒梯形。

2 利用3d旋转和透视3d旋转和透视方式
这种方式是对div进行旋转和透视操作，最终形成一个梯形。

HTML:
<div class="d"></div>

CSS:
.d{
   width:60px;
    height: 60px;
    background-color: rgba(249, 240, 104,0.5);
    transform:perspective(2em) rotateX(10deg);
    margin-left:30px;
  }
1
2
3
4
5
6
7
8
9
10
11

perspective：对元素进行透视操作
rotateX：以x轴（横轴）进行旋转（前后仰俯）

3 两个三角形加一个正方形拼接方式

HTML
<div class='box'></div>
<div class='box2'></div>
<div class='box3'></div>

CSS
.box,.box3 {
    width:0px;
    height:0px;

    border-top:50px solid rgba(0,0,0,0);
    border-right:30px solid  rgba(0,0,0,0);
    border-bottom:50px solid rgba(249, 240, 104,1);
    border-left:30px solid  rgba(0,0,0,0);

    margin-bottom:10px;
    display:inline-block;
  }
  .box2 {
    width:50px;
    height:50px;
    background-color:rgba(249, 240, 104,1);
    display:inline-block;
  }
  .box{
    transform: translate(34px,10px);
    box-shadow: 0 0 100px 100px rgba(249, 240, 104,0.3);
  }
  .box3{
    transform: translate(-34px,10px);
  }
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

1，首先，做三个‘小盒子’ 1号，和3号小盒子都做成小三角形，2号小盒子做成一个正方形。
2，有人要问了， 形状是出来了， 但是怎么拼起来呢，这里就要用到css中的定位指示 和 css3 里的transfrom 了。不了解的话，w3c里都有详细的解释，我这里只管实现我们要的效果。
3，先把所有的‘小盒子’排成一排，使块状元素排成一排的方法 ：可以给‘小盒子’加 浮动 float，也可以直接设置‘小盒子’的display：inline-block；由于我的习惯是只要加浮动， 就要给父元素清浮动，比较麻烦，我就直接设置‘小盒子’的display：inline-block 了。
4,最后设置一下 1号，和3号小盒子 的位移 就ok了。