CSS3—六边形
整理了2種方法，看完肯定覺得超簡單~
一、旋轉(zhuǎn)型
話不多說先看下需要的樣式：
1.transform:rotate(angle)
2.overflow
3.visibility
效果：演示效果，runjs
html結(jié)構(gòu)：
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<p>為所欲為為所欲為</p>
</div>
</div>
</div>
</body>
3層div，結(jié)構(gòu)是不是很簡單~接下來要怎么旋轉(zhuǎn)呢？
為了方便理解加了背景
box1：紅色
box2：黑色
box3：粉色
1.box1旋轉(zhuǎn)120°，box2旋轉(zhuǎn)-60°，box3再旋轉(zhuǎn)-60°,我們的內(nèi)容放在box3中。
2.經(jīng)過旋轉(zhuǎn)肯定有超出的部分，對3個div都設(shè)置overflow:hidden。
3.box1，box2是用來旋轉(zhuǎn)得到6邊形的，所以對他們設(shè)置visibility: hidden，box3放內(nèi)容,需顯示，因此設(shè)置visibility: visible。
（如果不對box3設(shè)置visibility: visible;它會繼承box2的visibility: hidden; ）
注意div的寬高不要相等，不然得到的就不是6邊形咯。
經(jīng)過旋轉(zhuǎn)和對超出部分的隱藏就得到我們想要的6邊形了，所有代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3—六邊形</title>
<style type="text/css">
.box1, .box2, .box3
{
width: 200px;
height: 250px;
overflow: hidden;
}
.box1, .box2
{
visibility: hidden;
}
.box1
{
transform: rotate(120deg);
-ms-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
}
.box2
{
transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.box3
{
transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
background-color:pink;
visibility: visible;
}
.box3 p{
color: yellow;
font-size: 22px;
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<p>為所欲為為所欲為</p>
</div>
</div>
</div>
</body>
</html>
二、拼接型
看效果：演示效果，runjs
很明顯2個三角形加1個矩形，是不是很簡單~
三角形請看上一篇：CSS3—三角形
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css—六邊形2</title>
<style>
.triangleb{
width:0;
height:0;
border-top:0px solid transparent;
border-right:60px solid transparent;
border-bottom:40px solid pink;
border-left:60px solid transparent;
}
.trianglet{
width:0;
height:0;
border-top:40px solid pink;
border-right:60px solid transparent;
border-bottom:0px solid transparent;
border-left:60px solid transparent;
}
.box{
width: 120px;
height: 65px;
background-color: pink;
}
</style>
</head>
<body>
<div class="triangleb"></div>
<div class="box"></div>
<div class="trianglet"></div>
</body>
</html>
博客園：CSS3—六邊形
總結(jié)
- 上一篇： 惠州曲庄湖的鱼可以吃吗？
- 下一篇： Ngnix下安装python2.7