如何旋转六边形使用CSS3 /帆布

Question

我想旋转六边形，但不知道如何遵循边缘...

我很感谢你帮助我！

Answer 1

这实际上是通过缩放而不是旋转来完成的。

如果你开始与此图像：

然后，扩展它的宽度到其原始宽度的50％，你会得到这样的：

这里的代码如何将宽度缩放到50％：

// move the canvas origin(0,0) to the center of the canvas 

ctx.translate(canvas.width/2,canvas.height/2); 

// scale the width to 50% of its original width 

ctx.scale(0.50,1); 

// finally draw the image, which will be scaled in width 

ctx.drawImage(img,-img.width/2,-img.height/2); 

所以要创建效果：

• 规模的橙色和紫色的六边形至50％的宽度
• 绘制它们彼此接近
• 借鉴了其他2个六边形的顶级黄金六角

Answer 2

我问ü使用的是纯CSS3或jQuery的你没有重播..

我正在考虑使用纯CSS3检查

乌尔

jsfiddle

HTML代码 -

<div class="hexagon-small" id="first"></div> 
<div class="hexagon-big" id="second"></div> 
<div class="hexagon-small" id="third"></div> 

及其CSS

#first 
{ 
    left:0px; 
} 
#second 
{ 
    left:-53px;  
} 

#third 
{ 
    left:-106px; 
} 
.hexagon-small { 
    width: 50px; 
    height: 55px; 
    background: black; 
    position: relative; 
    display:inline-block; 
    top:25px; 
    z-index:50; 
} 
.hexagon-small:before { 
    content: ""; 
    position: absolute; 
    top: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 25px solid transparent; 
    border-right: 25px solid transparent; 
    border-bottom: 25px solid black; 
} 
.hexagon-small:after { 
    content: ""; 
    position: absolute; 
    bottom: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 25px solid transparent; 
    border-right: 25px solid transparent; 
    border-top: 25px solid black; 
} 


.hexagon-big { 
    width: 100px; 
    height: 55px; 
    background: red; 
    position: relative; 
    display:inline-block; 
    top:25px; 
    z-index:100; 
} 
.hexagon-big:before { 
    content: ""; 
    position: absolute; 
    top: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 25px solid red; 
} 
.hexagon-big:after { 
    content: ""; 
    position: absolute; 
    bottom: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 25px solid red; 
}