欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

css3實現(xiàn)六邊形邊框的實例代碼

  發(fā)布時間：2019-05-24 15:22:17   作者：佚名   我要評論
這篇文章主要介紹了css3實現(xiàn)六邊形邊框的實例代碼,需要的朋友可以參考下

最外層boxF旋轉(zhuǎn)120度、第二層boxS旋轉(zhuǎn)-60度、第三層boxT再旋轉(zhuǎn)-60度，此時剛好回正，然后把圖片就放在第3層的div背景中。因為前兩層div中沒有東西，純粹就是用來旋轉(zhuǎn)得到6邊形的，所以對1，2層div設置 visibility: hidden ; 而第3層div是放圖片的，需要顯示出來，因此設置 visibility: visible;

經(jīng)過旋轉(zhuǎn)肯定有超出的部分，因此對3個div都設置 overflow:hidden; 經(jīng)過旋轉(zhuǎn)和對超出部分的隱藏我們就可以得到我們想要的6邊形了。

注意：

1. 如果不對第3層div設置 visibility: visible; 那它默認就會繼承第二層div（boxS）的 visibility: hidden;
2.div的寬高比例必須滿足4：5，不然得到的就不是六邊形了。

實現(xiàn)原理：

•transform: rotate(120deg); 圖片旋轉(zhuǎn)
•overflow:hidden; 超出隱藏
•visibility: hidden; 也是隱藏，與 display:none; 相似，但不同的是，它雖然隱藏了，但依然會在網(wǎng)頁中占有位置

實現(xiàn)代碼：

HTML代碼

<div class="boxF">
    <div class="boxS">
        <div class="boxT" style="background-image: url(tupian.jpg);"></div>
    </div>
</div>

CSS代碼

.boxF, 
.boxS, 
.boxT, 
.overlay {
 width: 200px;
 height: 250px;
 overflow: hidden;
}
.boxF, 
.boxS {
 visibility: hidden;
}
.boxF {
 transform: rotate(120deg);
 float: left;
 margin-left: 10px;
 -ms-transform: rotate(120deg);
 -moz-transform: rotate(120deg);
 -webkit-transform: rotate(120deg);
}
.boxS {
 transform: rotate(-60deg);
 -ms-transform: rotate(-60deg);
 -moz-transform: rotate(-60deg);
 -webkit-transform: rotate(-60deg);
}
.boxT {
 transform: rotate(-60deg);
 background: no-repeat 50% center;
 background-size: 125% auto;
 -ms-transform: rotate(-60deg);
 -moz-transform: rotate(-60deg);
 -webkit-transform: rotate(-60deg);
 visibility: visible;
}

總結

以上所述是小編給大家介紹的css3實現(xiàn)六邊形邊框的實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關文章

  • css畫正六邊形的兩種方法

    本文給大家分享css畫正六邊形的兩種方法，每種方法都不錯，需要的朋友跟隨腳本之家小編一起看看吧
    2018-07-06

  • css實現(xiàn)六邊形圖片的示例代碼

    這篇文章主要介紹了css實現(xiàn)六邊形圖片的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-30

  • CSS實現(xiàn)圖片背景填充的六邊形的示例代碼

    這篇文章主要介紹了CSS實現(xiàn)圖片背景填充的六邊形的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2017-11-30

  • CSS3繪制六邊形的簡單實現(xiàn)

    下面小編就為大家?guī)硪黄狢SS3繪制六邊形的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-25

  • 純css繪制蜂巢六邊形效果

    這篇文章主要介紹了純css繪制蜂巢六邊形效果,需要的朋友可以參考下
    2014-05-08

  • 純css實現(xiàn)的六邊形(蜂窩)導航效果(支持hover/兼容瀏覽器)

    在之前的文章中曾經(jīng)寫到過一篇“三角形變形記之純css實現(xiàn)的分布導航條效果”，其中用到了邊框?qū)崿F(xiàn)三角形的效果。最近又折騰了一個六邊形的蜂窩效果給大家蹂躪。主要用到了
    2013-02-05

  • CSS 實現(xiàn)蜂巢/六邊形圖集的示例代碼

    這篇文章主要介紹了CSS 實現(xiàn)蜂巢/六邊形圖集的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起
    2020-03-05

最新評論