转自：https://blog.csdn.net/ChenXvYuan_001/article/details/85016836 https://www.cnblogs.com/linsinan/p/6928734.html 1 利用border加粗方式 这是网上较为常见的方式，其原理就是对一个高度为0px的正方形的div的border-top进行增粗。
HTML:
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);
}
理解代码： 建立一个div,高度为0,宽度400px（可以理解为一个矩形，但矩形的高度为0，自然这个矩形就这垂直方向压缩成了一条线），div上边界粗度或厚度设为100px且为实线，左右边界线厚度也为100px，但设为透明（利用了css的transparent属性） 其实这里构造的div就和这两个相框一样，这两个相框实质上就是把一个矩形的border 增粗了，div增粗后上下左右的边界效果就是如相框所示的这样，其实上下左右的border加粗以后就成了4个梯形，然后我将相框的高度设为0，此时这个div就是这样： 然后我将左右边界设为透明 自然就成了一个倒梯形。 2 利用3d旋转和透视3d旋转和透视方式 这种方式是对div进行旋转和透视操作，最终形成一个梯形。
HTML:
CSS:
.d{
width:60px;
height: 60px;
background-color: rgba(249, 240, 104,0.5);
transform:perspective(2em) rotateX(10deg);
margin-left:30px;
}
perspective：对元素进行透视操作 rotateX：以x轴（横轴）进行旋转（前后仰俯） 3 两个三角形加一个正方形拼接方式
HTML
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，首先，做三个‘小盒子’ 1号，和3号小盒子都做成小三角形，2号小盒子做成一个正方形。 2，有人要问了， 形状是出来了， 但是怎么拼起来呢，这里就要用到css中的定位指示 和 css3 里的transfrom 了。不了解的话，w3c里都有详细的解释，我这里只管实现我们要的效果。 3，先把所有的‘小盒子’排成一排，使块状元素排成一排的方法 ：可以给‘小盒子’加 浮动 float，也可以直接设置‘小盒子’的display：inline-block；由于我的习惯是只要加浮动， 就要给父元素清浮动，比较麻烦，我就直接设置‘小盒子’的display：inline-block 了。 4,最后设置一下 1号，和3号小盒子 的位移 就ok了。