在项目中我们时常会遇到一些特殊的图形比如说圆角梯形，第一时间我们想到的就是让UI同学给我们切图，但其实同时css我们也可以实现这种效果。

使用filter过滤器实现圆角梯形

首先，如果不考虑圆角，梯形是由长方形和三角形（三角形绘制可参考另一篇文章css绘制三角形）组成，拼接一个或多个三角形就可以形成直角梯形或普通梯形，如下：

那么梯形有了，下一步就是如何让梯形圆角，因为是拼接的图形不能直接使用border-radius，这里我们采用一种奇特的方式filter: contrast搭配filter: blur。blur(5px)用于添加高斯模糊，contrast(20)用于修改对比度，当两者同时使用时contrast会抵消掉高斯模糊阴影部分但会保留菱角已经被模糊的主体，代码如下：

<div class="container">
  <div class="content">
    <div class="box"></div>
    <div class="tri"></div>
  </div>
</div>

<style>
.container {
    position: relative;
    width: 500px;
    height: 100px;
  filter: contrast(20);
  background-color: white;
  overflow: hidden;
}
.content {
  height: 100px;
  filter: blur(10px);
}
.box {
  width: 300px;
  height: 100px;
  background: black;
} 
.tri {
   position: absolute;
  widht: 0;
  height: 0;
  top: 0;
  left: 300px;
  border-left: 30px solid black;
  border-bottom: 50px solid black;
  border-top: 50px solid transparent;
  border-right: 30px solid transparent;
}

</style>

更多contrast和blur搭配用法详见：filter: contrast() 配合 filter: blur() 的奇妙化学作用

使用3D旋转实现梯形

在实际生活中，如果我们将一个长方块绕一个轴进行旋转后再隔一定距离看会发现我们看到的是一个梯形形状，在不同的位置看梯形还可以呈现不同形状（普通梯形、等腰梯形、直角梯形）

通过以上发现，我们就可以通过CSS 3D实现梯形效果，代码如下：

<div class="tag-wrapper">
  <div class="title-box"></div>
  <div class="title-box2"></div>
  <div class="title-box3"></div>
</div>

.tag-wrapper {
}

.title-box,
.title-box2,
.title-box3 {
  position: relative;
  display: inline-block;
  margin-right: 24px;
  padding: 0 24px;
  width: 60px;
  height: 30px;
}
.title-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform-origin: top left;
  background: orange;
  transform: perspective(10px) rotateX(-2deg);
  border-radius: 4px;
}
.title-box2 {
  perspective: 10px;
  perspective-origin: left bottom;
}
.title-box2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: orange;
  transform: rotateX(2deg);
  border-radius: 4px;
}

.title-box3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: orange;
  transform: perspective(5px) rotateX(2deg);
  border-radius: 4px;
}

绕轴旋转在css中使用rotateX(2deg)进行x轴旋转； 隔一定距离在css中使用perspective(5px)变换函数或属性perspective: 5px设置三维视角观察者与物体距离； 不同的位置看梯形在css中使用perspective-origin或transform-origin设置三维视角观察者位置； 通过调整上面三种函数或属性的值我们可以得到格式各样的梯形