前言

相信大家在用css实现三角形，比如下拉或者向右的三角形的时候，已经体会到了css的神奇之处，我们之所以考虑用样式而非图片控制效果，很可能是出于以下的关键几条原因：

1.css写的样式具有更好的可变性，我们可以控制其大小、颜色
2.可以减少对图片的依赖，减少http请求，让页面性能更佳
3.能够更好的支持一些动态内容，动态需求

场景

那么本文将带大家用纯css实现一个梯形的背景，它的效果可能是这样的。你很容易想到两边可以用伪元素实现即可，代码地址在这里：链接

image.pngimage.png

伪元素边框实现

实现这样的直角梯形是比较简单的，代码如下：其核心的实现思路是利用首尾的伪元素，创建行内块级元素，然后通过底边和左边或者右边的组合实现三角形效果，最终定位到盒模型的左边和右边。（如果你有兴趣还可以尝试下上边题型，单边梯形等效果，另外，因为我们要考虑到不影响内容，所以要把你的梯形两边z-index设置更低）

  1. .ladder{
  2.     &::after,&::before{
  3.    content:'';
  4.   position:absolute;
  5.     display:inline-block;
  6.     top:-50px;
  7.   bottom:0;
  8.   z-index:-1;
  9.   border-bottom:40px solid   rgb(44,59,82);
  10.   }
  11.   &::after{
  12.     right:-100px;
  13.     border-right:100px solid #fff;
  15.   }
  16.   &::before{
  17.     left:-20px;
  18.     border-left:20px solid #fff;
  19.   }
  20. }

小结：也希望你能通过这种css方案了解css实现普通三角形包括各个方向的一种方案。

伪元素transform3D变形

上面的技术方案只能实现最简单的直角梯形，但如果梯形需要一些复杂的圆角，就无法实现了。

那么在css的方案中，其实是有css3 3d变形的，思考下，如果按照透视的关系，将一个长方形，上方拉远，那么透视的效果就是一个梯形了，那么我们伪元素尝试下是否可行，在此之前，你需要了解3d透视的css语法:链接

一句话说明：perspective负责透视的距离，rotateX负责旋转产生梯形效果，scale负责旋转透视之后大小的问题

  1.   &::before{
  2.  content: '';
  3. position: absolute;
  4. top: 0; right: 0; bottom: 0; left: 0; z-index: -1;
  5. background: rgb(44,59,82);
  6. border-radius: .5em .5em 0 0;
  7. box-shadow: 0 .15em white inset;
  8. transform: perspective(.8em) rotateX(5deg) scale(1.49); 
  9. transform-origin: bottom;
  10.   }

实现的重点：
1.梯形要保证底部的效果，所以把变形的基准点选在了底部
2.由于透视的关系，导致的高度不对，使用scale进行校准
3.因为如果直接对元素进行透视，会导致内容也发生透视，导致问题，所以最终设置的还是伪元素

拓展延伸

除了本文提到的技术方案，

参考文档

  • 《css揭秘》