純css繪制蜂巢六邊形效果
來源：易賢網 閱讀：2920 次 日期：2014-07-23 15:06:10
溫馨提示：易賢網小編為您整理了“純css繪制蜂巢六邊形效果”,方便廣大網友查閱！

純CSS繪制的六邊形

圖片一

代碼如下:

<html>

<head>

<title>Draw Hive</title>

</head>

<style type="text/css">

.hexagon {

display: inline;

float: left;

}

#second {

margin-left: 4px;

}

#third {

clear: left;

margin-left: 54px;

margin-top: -28px;

}

.hiveTop{

width: 0;

border: 30px solid #6C6;

border-top: none;

border-bottom: 30px solid #6C6;

border-left: 52px solid transparent;

border-right: 52px solid transparent;

}

.hiveCenter {

width: 104px;

height: 60px;

background-color: #6C6;

}

.hiveBottom {

width: 0;

border: 30px solid #6C6;

border-bottom: none;

border-top: 30px solid #6C6;

border-left: 52px solid transparent;

border-right: 52px solid transparent;

}

</style>

<body>

<div class="hexagon" id="first">

<div class="hiveTop">

</div>

<div class="hiveCenter">

</div>

<div class="hiveBottom">

</div>

</div>

<div class="hexagon" id="second">

<div class="hiveTop">

</div>

<div class="hiveCenter">

</div>

<div class="hiveBottom">

</div>

</div>

<div class="hexagon" id="third">

<div class="hiveTop">

</div>

<div class="hiveCenter">

</div>

<div class="hiveBottom">

</div>

</div>

</body>

</html>

更多信息請查看IT技術專欄

更多信息請查看網頁制作
易賢網手機網站地址：純css繪制蜂巢六邊形效果
關于我們 | 聯系我們 | 人才招聘 | 網站聲明 | 網站幫助 | 非正式的簡要咨詢 | 簡要咨詢須知 | 新媒體/短視頻平臺 | 手機站點

版權所有:易賢網