# 网页中实现正六边形的 N种姿势

## 姿势1

css的border

``````/*css*/
.lb01 {
position: relative;
width: 200px;
height: 120px;
background-color: red;
margin: 100px;
}
.lb01:after {
content: "";
position: absolute;
display: block;
top: -160px;
width: 0;
height: 0;
border: 100px solid transparent;
border-bottom: 60px solid red;
}
.lb01:before {
content: "";
position: absolute;
display: block;
bottom: -160px;
width: 0;
height: 0;
border: 100px solid transparent;
border-top: 60px solid red;
}

``````

## 姿势2

css3的transform

``````.lb02 {
width: 260px;
height: 300px;
margin: 50px;
-webkit-transform: rotate(60deg);
overflow: hidden;
}
.lb02 div,
.lb02 img {
width: 100%;
height: 100%;
overflow: hidden;
}

.lb02> div {
-webkit-transform: rotate(-120deg);
}

.lb02> div> div {
-webkit-transform: rotate(60deg);
}

``````

## 姿势3

svg的多边形

``````

## 姿势4

canvas绘图

``````var canvas = document.getElementById("canvas");
canvas.width = 400;
canvas.height = 400;
var cc = canvas.getContext("2d");

// 填充一个背景
cc.fillStyle = "#31a6e2";
cc.rect(0 , 0 , 400 , 400);
cc.fill();

cc.beginPath();
for (var i = 0 ; i < 6 ; i++) {
var x =  Math.cos((i * 60)/180 * Math.PI) * 150 + 200 ;
var y = -Math.sin((i * 60)/180 * Math.PI) * 150 + 200;
cc.lineTo(x,y);
}
cc.closePath();

cc.lineWidth = 2;
cc.fillStyle = "#fc3598";
cc.fill();

``````

``````作者：yuyuyu

#test {
width: 850px;
height: 800px;
margin: 0 auto;
border: 1px solid red;
-webkit-perspective: 1920px;
-webkit-transform-origin: 50% 30% 600px;
overflow: hidden;
}

ul {
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(60deg);
}

ul:after {
content: "";
display: block;
clear: both;
}

ul li {
position: relative;
float: left;
width: 90px;
height: 160px;
list-style: none;
margin: 0px 50px;
background-color: #21a4e8;
-webkit-transform: rotate(90deg);
}
ul li:after {
content: "";
display: block;
position: absolute;
top: 0;
right: 100%;
border-style: solid;
border: 80px solid transparent;
border-width: 80px 50px;
border-right-color: #21a4e8;
}
ul li:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 100%;
border-style: solid;
border: 80px solid transparent;
border-width: 80px 50px;
border-left-color: #21a4e8;
}
.dob {
margin-left: 145px;
}