国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

CSS-蜂窩狀展示區域（多個六邊形）的一種實現方式

ideaa / 1263人閱讀

摘要：網上已經有很多關于正六邊形的畫法，主要是利用一個矩形和前后的兩個三角形組合而成。是內容區，是一個菱形切割區，將切割成六邊形。的高度，多排六邊形的情況下，的高度與排與排之間的間隙有關。的高度，六邊形對應頂點間的距離。

網上已經有很多關于正六邊形的CSS畫法，主要是利用一個矩形和前后的兩個三角形組合而成。

之前在看四維圖新的官網的時候，發現了一種六邊形的畫法，比較適合多排六邊形組合成蜂窩狀的展示區域（注：四維圖新現在改成了上面說的那種畫法了）。

示意圖：

1、HTML結構


    
    
      
  • 
        1
      
    • 
      
  • 
        2
      
    • 
      
  • 
        3
      
    • 
      
  • 
        4
      
    • 
      
  • 
        5
      
    • 
      
  • 
        6
      
    • 
      
  • 
        7
      
    • 
      
  • 
        8
      
    • 
      
  • 
        9
      
    • 
      
  • 
        10
      
    • 
      
  • 
        11
      
    • 
      
  • 
        12
      
    • 
      
  • 
        13
      
    • 
      
  • 
        14
      
    • 
      
  • 
        15
      
    • 
      
  • 
        16
      
    • 
      
  • 
        17
      
    • 
      
  • 
        18
      
    • 
      
  • 
        19
      
    • 
      
  • 
        20
      
    •

　　每個li里包著.hex和.hexIn。.hexIn是內容區，.hex是一個菱形切割區，將.hexIn切割成六邊形。具體看css。

2、CSS

      ul {
        margin: 0;
        padding: 0;
      }
      ul {
        list-style: none;
        width: 560px;
        margin: 100px auto;
      }
      li {
        float: left;
        margin: 0 5px;
        height: 96px;
      }
      .hex {
        overflow: hidden;
        display: block;
        width: 100px;
        height: 116px;
        transform: rotate(-60deg) skewY(30deg);
      }
      .hexIn {
        background-color: #ccc;
        display: block;
        width: 100px;
        height: 116px;
        line-height: 116px;
        text-align: center;
        transform: skewY(-30deg) rotate(60deg);
      }
      li:nth-child(9n + 6) {
        margin-left: 60px;
      }

　　里面有幾個關鍵的長度和寬度：

  1. li的寬度，li的寬度由內部元素撐開。
  2. li的高度，多排六邊形的情況下，li的高度與排與排之間的間隙有關。
  3. .hex的寬度，即六邊形平行邊之間的距離。
  4. .hex的高度，六邊形對應頂點間的距離。
  5. .hexIn的高度和寬度同.hex。

.hexIn區域如圖：

.hex區域如圖：

li區域如圖：

?

根據以上的寬度和高度說明，以上數值都要滿足一定的關系，直接說結論：

假設需要平行邊距離為w的六邊形，每個六邊形之間的間隔為m。

那么：

  1. ?li的高度：0.866(w+m)
  2. .hex的寬度：w，高度：1.155w
  3. .hexIn同上
  4. 如果第一排有x個六邊形，那么為實現相鄰兩排交錯排列的效果，需要設置：li:nth(`x + x - 1`n + `x + 1`) { margin-left: 0.5(w+2m) }。比如第一排有6個，那么li:nth(11n+7) { ... }.

3、實現效果圖

?

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1282.html

相關文章

  • JavaScript精編干貨

    摘要：老姚淺談怎么學鑒于時不時，有同學私信問我老姚，下同怎么學前端的問題。擼碼聽歌，全局控制。 淺析用 js 解析 xml 的方法 由于項目上需要解析 xml，于是各種百度，然后自己總結了下各個主流瀏覽器解析 xml 的方法，只能是很淺顯的知道他的用法，但是還沒有深層次的研究。 裝 X - 建立自己的斗圖網站庫 之前加過一個斗圖群，看到很多經典的表情，然后就收藏到了 QQ， 迫于本屌絲開不起...

    Fourierr 評論0 收藏0

  • CSS學習筆記(十五) 使用map標簽實現單圖多熱點

    摘要：標簽中的屬性可引用的標簽中的或屬性取決于瀏覽器，所以我們應同時向標簽添加和屬性。首先用得到幾個坐標然后代碼實現就是這樣。定義三角形至少需要三組坐標高緯多邊形則需要更多數量的頂點。 來源：js中圖片點擊區域的實現 - javascript - SegmentFault map標簽 定義一個客戶端圖像映射。圖像映射（image-map）指帶有可點擊區域的一幅圖像。 are...

    EscapedDog 評論0 收藏0

  • 馬蜂窩容器化平臺前端賦能實踐

    摘要：本文將結合馬蜂窩容器化平臺賦能前端應用構建的實踐經驗，介紹整個平臺背后的設計和實現原理，取得的一些效果及問題的優化方案。如果使用容器化平臺就不會出現這方面的擔憂。 容器對前端開發真的有用嗎？答案是肯定的。 最初當我向公司的前端同學「安利」容器技術的時候，很多人都會說：「容器？這不是用在后端的技術嗎？我不懂啊，而且前端開發用不上吧。」 showImg(https://segmentfau...

    wall2flower 評論0 收藏0

  • 馬蜂窩容器化平臺前端賦能實踐

    摘要：本文將結合馬蜂窩容器化平臺賦能前端應用構建的實踐經驗，介紹整個平臺背后的設計和實現原理，取得的一些效果及問題的優化方案。如果使用容器化平臺就不會出現這方面的擔憂。 容器對前端開發真的有用嗎？答案是肯定的。 最初當我向公司的前端同學「安利」容器技術的時候，很多人都會說：「容器？這不是用在后端的技術嗎？我不懂啊，而且前端開發用不上吧。」 showImg(https://segmentfau...

    余學文 評論0 收藏0

  • 馬蜂窩容器化平臺前端賦能實踐

    摘要：本文將結合馬蜂窩容器化平臺賦能前端應用構建的實踐經驗，介紹整個平臺背后的設計和實現原理，取得的一些效果及問題的優化方案。如果使用容器化平臺就不會出現這方面的擔憂。 容器對前端開發真的有用嗎？答案是肯定的。 最初當我向公司的前端同學「安利」容器技術的時候，很多人都會說：「容器？這不是用在后端的技術嗎？我不懂啊，而且前端開發用不上吧。」 showImg(https://segmentfau...

    desdik 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<