CSS 实现圆角梯形

我们用 CSS 实现一个梯形，效果如下图：

可能大家没有思路，我们可以实现一个圆角正方形，效果图如下：

代码实现如下：

.skewed {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 80px;
}
.skewed::before{ 
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: pink;
  border: 1px solid #ff9900;
  border-radius: 8px;
  z-index: -1; 
}

那如何转变成梯形的呢？添加如下代码：

.skewed::before{
  -webkit-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
  -moz-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
  -ms-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
  -o-transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
  transform: perspective(0.5em)scale(1.1,1.3) rotateX(5deg);
  -webkit-transform-origin:bottom right;  
  transform-origin:bottom right;      
}

案例实现，效果图如下：

<div class="content">
  <div class="nav">我要询价</div>
  <div class="line"></div>
  <div class="nav">我要发运</div>
</div>

样式效果：

.content {
  display: flex;
  align-items: baseline;
}
.nav {
  position: relative;
  text-decoration: none;
  display: inline-block;
  width: 100px;
  font-size: 12px;
  color: #666;
  line-height: 20px;
}
.nav::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border: 1px solid #ededed;
  border-bottom: none;
  border-radius: 15px 15px 0 0;
  box-shadow: 3px -3px 5px #ededed;
  transform: perspective(10px)scale(1.1, 1.3) rotateX(5deg);
  z-index: -1;
}
.line {
  width: 90px;
  background: #ededed;
  height: 1px;
  box-shadow: 2px 0 3px #ededed;
  transform: translate(0px, 4px);
  z-index: -999;
}