成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

CSS-蜂窩狀展示區(qū)域（多個六邊形）的一種實現(xiàn)方式

ideaa / 1340人閱讀

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

網(wǎng)上已經(jīng)有很多關(guān)于正六邊形的CSS畫法，主要是利用一個矩形和前后的兩個三角形組合而成。

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

示意圖：

1、HTML結(jié)構(gòu)


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

　　每個li里包著.hex和.hexIn。.hexIn是內(nèi)容區(qū)，.hex是一個菱形切割區(qū)，將.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;
      }

　　里面有幾個關(guān)鍵的長度和寬度：

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

.hexIn區(qū)域如圖：

.hex區(qū)域如圖：

li區(qū)域如圖：

?

根據(jù)以上的寬度和高度說明，以上數(shù)值都要滿足一定的關(guān)系，直接說結(jié)論：

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

那么：

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

3、實現(xiàn)效果圖

?

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/1282.html

相關(guān)文章

  • JavaScript精編干貨

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

    Fourierr 評論0 收藏0

  • CSS學(xué)習(xí)筆記(十五) 使用map標簽實現(xiàn)單圖多熱點

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

    EscapedDog 評論0 收藏0

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

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

    wall2flower 評論0 收藏0

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

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

    余學(xué)文 評論0 收藏0

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

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

    desdik 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<