利用 clip-path 绘制等腰梯形边框
在 css 中绘制等腰梯形边框，可以使用 clip-path 属性。原理是通过绘制两个轮廓相似的梯形，其中上面的梯形比下面的稍小，并将其通过 z-index 或背景叠加在一起。
代码示例
.test2 {
width: 115px;
height: 230px;
position: relative;
top: -4px;
background: #4FA6E5;
border-bottom: 1px solid #4FA6E5;
clip-path: polygon(0 55px, 100% 0, 100% 100%, 0 calc(100% - 55px));
box-sizing: border-box;
}
.test2:after {
content: '';
padding: 0;
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
background: #082F4C;
clip-path: polygon(2px 57px, 100% 2px, 100% calc(100% - 2px), 2px calc(100% - 57px));
}效果演示
[jsbin 示例](https://jsbin.com/mogirok/edit?css,output)
这种方法可以实现等腰梯形边框，并可以将其与外侧的长方形边框连接在一起。
