«

利用css3书写正6边形

emer 发布于 2017-11-7 09:37   3199 次阅读      

1.倾斜正六边形
<div id="box">
<div class="con-show01 margin-left margin-top">  
        <div class="con-show02">  
          <div class="con-show03 bg04">  
            <img src="">  

          </div>  
        </div>  
      </div>  
  </div>
    <style>
    #box{
        width: 200px;height: 250px;
        transform: rotate(30deg);
    }
    .con-show01{width: 200px;height: 250px;float: left;margin-left: 10px;overflow: hidden;transform:rotate(120deg);}  
.con-show02{width: 100%;height: 100%;overflow: hidden;transform:rotate(-60deg);}  
.con-show03{width: 100%;height: 100%;overflow: hidden;transform:rotate(-60deg);position: relative;background: pink;}  
    </style>


2.正六边形 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div class="con-show01 margin-left margin-top">  
        <div class="con-show02">  
          <div class="con-show03 bg04">  
            <img src="">  

          </div>  
        </div>  
      </div>  
    <style>
    .con-show01{width: 200px;height: 250px;float: left;margin-left: 10px;overflow: hidden;transform:rotate(120deg);}  
.con-show02{width: 100%;height: 100%;overflow: hidden;transform:rotate(-60deg);}  
.con-show03{width: 100%;height: 100%;overflow: hidden;transform:rotate(-60deg);position: relative;background: pink;}  
    </style>
</body>
</html>