使用CSS绘制一个平行四边形

使用CSS绘制一个平行四边形,这里使用的主要属性是 transform: skew(15deg),相当于对元素进行旋转,不过IE9 一下是不支持的,如果需要向下兼容,建议使用四边形图片代替。使用CSS 代码处理如下:

 <!Doctype html>
    
    <html>
    
    <head>
    
      <meta http-equiv="Content-Type" content="text/html; charset=gbk2312" />
    
      <title>平行四边形</title>
    
      <style type="text/css">
        .box {
          width: 120px;
        }
    
        .skew {
          width: 118px;
          height: 34px;
          background: #4effe1;
          margin: 0 auto;
          color: #000;
          font-size: 17px;
          line-height: 34px;
          text-align: center;
          transform: skew(-15deg);
        }
    
        .skew-main {
          transform: skew(15deg);
        }
      </style>
    
    </head>
    
    <body>
    
      <div class="box">
        <div class="skew">
          <div class="skew-main">退出</div>
        </div>
      </div>
    
    </body>
    
    </html>

你可能感兴趣的:(CSS3)