css-梯形样式

<!DOCTYPE html>
<html>
<head>
  <title>梯形</title>
  <meta charset="utf-8">
  <style type="text/css">
    #one{
      position: relative;
      height: 500px;   //父元素必须设置高度
    }
    #one:before{
      position: absolute;
      left: 0;
      bottom: 0;
      content: "";
      height: 500px;
      width: 350px;
      background-color: red;
      vertical-align: bottom;
      -webkit-transform: scale(1.1, 1.3) perspective(.5em) rotateX(2.9deg);
      -webkit-transform-origin: left bottom;
    }
  </style>
</head>
<body>
  <div id="one">
  </div>
</body>
</html>

posted on 2018-04-08 11:59 漏三刀阅读(1105) 评论(0) 编辑收藏举报