CSS 上/下边倾斜的梯形绘制

Posted 2021-06-07 JIZQAQ

思路

里面其实就是一个普通的矩形div，但是将它设置的比外面的div长宽都要大，然后做旋转处理。外面的div把超出的部分做hidden处理，中间那个只显示部分看起来就是一个梯形了。

样例代码

因为提取修改的是项目代码里面部分，我需要画的是贴底的梯形，所以那部分的样式也保留了，主要关注下面rotate那部分代码就是了 

<div class="title_box">
      <div class="lighter_box">
</div>

.title_box{
  width:100%;
  overflow: hidden;
}
.lighter_box{
  height:30%;
  width: 140%;
  margin-left: -20%;
  margin-top: 30%;
  background-color: white;
  position:fixed;
  bottom:-10%;
  transform:rotate(-4deg);
  -ms-transform:rotate(-4deg); 	/* IE 9 */
  -moz-transform:rotate(-4deg); 	/* Firefox */
  -webkit-transform:rotate(-4deg); /* Safari 和 Chrome */
  -o-transform:rotate(-4deg); 	/* Opera */
  z-index: 1;
}

效果：