CSS制作直角梯形

    <view class="trapezoid"></view>

.trapezoid{
  position:relative;
  height: 80px;
  width: 360rpx;
  border-left:2rpx solid #c8c8c8;
  overflow:hidden;
}
.trapezoid:before{
  content:'';
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  width: 360rpx;
  border:2rpx solid #c8c8c8;
  transform-origin:0 100%;
  transform:skewX(10deg);
}

相关知识点：CSS3 transform 属性
CSS3 transform-origin 属性