CSS3—六边形
整理了2種方法，看完肯定覺得超簡單~
一、旋轉型
話不多說先看下需要的樣式：
1.transform:rotate(angle)
2.overflow
3.visibility
效果：演示效果，runjs
html結構：
<body>
<div class="box1">
<div class="box2">
<div class="box3">
<p>為所欲為為所欲為</p>
</div>
</div>
</div>
</body>
3層div，結構是不是很簡單~接下來要怎么旋轉呢？
為了方便理解加了背景
box1：紅色
box2：黑色
box3：粉色
1.box1旋轉120°，box2旋轉-60°，box3再旋轉-60°,我們的內容放在box3中。
2.經過旋轉肯定有超出的部分，對3個div都設置overflow:hidden。
3.box1，box2是用來旋轉得到6邊形的，所以對他們設置visibility: hidden，box3放內容,需顯示，因此設置visibility: visible。
（如果不對box3設置visibility: visible;它會繼承box2的visibility: hidden; ）
注意div的寬高不要相等，不然得到的就不是6邊形咯。
經過旋轉和對超出部分的隱藏就得到我們想要的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—六邊形
總結
- 上一篇： 惠州曲庄湖的鱼可以吃吗？
- 下一篇： Installation error: