css實現等邊六邊形


在平時的頁面布局中,我們也會經常碰到蜂窩煤類型的模塊:

 

那么我們把他拆開,就是單個的六邊形,如何用css去實現一個六邊形呢?下面是我用繪圖軟件繪制的css實現六邊形的步驟:

 

具體的html代碼如下:

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      .list{
        width: 200px;
        height: 250px;
        overflow: hidden;
        transform: rotate(120deg);
        margin: 200px;
      }
      .list_child{
        width: 100%;
        height: 100%;
        overflow: hidden;
        transform: rotate(-60deg);
      }
      .list_child_child{
	    width: 100%;
	    height: 100%;
	    overflow: hidden;
	    transform: rotate(-60deg);
	    background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="list">
      <div class="list_child">
        <div class="list_child_child"></div>
      </div>
    </div>
  </body>
</html>

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM