用Div+CSS完成一个等腰梯形

1.思路：等腰梯形实质上是顶点在同一点的两个相似三角形叠加在一起的的非公共部分。我们知道，用CSS很容易地能做出一个三角形，所以同理，做出一个等腰梯形也不是很困难 。我们只需要将内部的div水平垂直定位在外部div的内部，然后通过border大法绘出一个三角形，内部div其实并不一定要是一个三角形，因为内部div的主要用途在于覆盖外部三角形的一部分，使之成为一个等腰梯形，所以对外部div来说只需设置它的背景色为白色即可。

2.代码：

    <div class="box">        <div class="inner"></div>    </div>

    *{            padding:0;            margin:0;            box-sizing:border-box;        }        .box{            width:0;            height:0px;            border:100px solid;            border-color:transparent transparent red transparent;            position:relative;        }        .inner{            position:absolute;            width:80px;            height:80px;            left:50%;            top:50%;            transform:translateX(-50%) translateY(-50%);            background:#fff;        }

3.截图