CSS实现梯形

本质上就是设置了3个方向的边框border，其中两个方向的border为透明色。

1.横向梯形

<div class="div1"></div>
<div class="div2"></div>

<style>
       .div1{
            width:100px;
            height: 0;
            border-bottom: 20px solid #000;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
        }
        .div2{
            width:100px;
            height: 0;
            border-top: 20px solid #000;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
        }
</style>

效果图：

2.纵向梯形

<div class="div3"></div>
<div class="div4"></div>

<style>
      .div3{
            width:0;
            height: 100px;
            border-left: 20px solid #000;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
        }
        .div4{
            width:0;
            height: 100px;
            border-right: 20px solid #000;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
        }
</style>

效果图：