css画平行四边形

利用伪元素来操作。

   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       .location{
           position: relative;
           top: 150px;
           left: 150px;
       }
        .button{
            width: 120px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: white;
        }
       .button:before{
           content: '';
           position: absolute;
           top: 0; right: 0; bottom: 0; left: 0;
           background-color: #51bfff;
           transform: skewX(-45deg);
           z-index: -1;
       }
   </style>


   <div class="location button">click</div>