css绘制梯形

1.div写法

<div class="house_roof"></div>

2.css样式

.house_roof{
  position:absolute;
  top:30%;
  padding:  0;
  text-decoration: none;
  display: inline-block;
  z-index: 0;
  width:65%;
  height:60px;
  line-height:28px;
  text-align:right;
  padding-right:10px;
  font-size:16px;
}
.house_roof::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,160,233,0.2);
  border: 1px solid #00ffff;
  border-bottom: none;
  -webkit-transform:perspective(0.5em)scale(1,1) rotateX(1deg);
  z-index: -1;
  /* -webkit-transform-origin:bottom right; */
}

3.图片展示