是否有可能圆形？六边形，八边形等形状？ [英] Is it possible to rounded shapes? Shapes such as hexagon, octagon?

问题描述

我一直试图绕过六角形的角落一段时间，但是我发现我的方法都不起作用。你们有什么建议可以做到吗？

http://jsfiddle.net/9BTTQ/4/

HTML

 < div class =hexagon> 
< div> 1< / div> 
< div> 2< / div> 
< div> 3< / div> 
< / div> 
  

CSS

  .hexagon {
 position：relative; 
} 
 
 .hexagon> DIV {
职位：绝对; 
 top：0;剩余
：48px; 
 -moz-border-radius：16px; 
 border-radius：16px; 
宽度：64px; 
 height：96px; 
 background-color：blue; 
} 
 
 .hexagon> DIV：第n个孩子（2）{
 -moz-transform：rotate（60deg）; 
 -ms-transfrom：rotate（60deg）; 
 -webkit-transform：rotate（60deg）; 
 transform：rotate（60deg）; 
} 
 
 .hexagon> DIV：第n个孩子（3）{
 -moz-transform：rotate（120deg）; 
 -ms-transfrom：rotate（120deg）; 
 -webkit-transform：rotate（120deg）; 
 transform：rotate（120deg）; 
} 
  

注意：

• 这可能会更好地完成SVG或画布，除非它是一个孤立的需求。创建一组元素来形成一个形状是非语义和乏味的。




• 由于<$ c，IE 7/8完全不起作用$ c> transform ， border-radius 和 nth-child 。




• 您会注意到边框半径，宽度和高度之间的简单数学关系。




• 此网站显示了许多可以生成的有趣形状。

I've been trying to round the corners of hexagon shapes for a while however I've found that none of my methods work. Do you guys have any suggestions on how it can be done?

解决方案

http://jsfiddle.net/9BTTQ/4/

HTML

<div class="hexagon">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

CSS

.hexagon {
    position: relative;    
}

.hexagon > DIV {
    position: absolute;
    top: 0;
    left: 48px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    width: 64px;
    height: 96px;
    background-color: blue;
}

.hexagon > DIV:nth-child(2) {
    -moz-transform: rotate(60deg);
    -ms-transfrom: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}

.hexagon > DIV:nth-child(3) {
    -moz-transform: rotate(120deg);
    -ms-transfrom: rotate(120deg);
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg);
}

Notes:

• This would probably be better done with SVG or a canvas unless it's an isolated need. Creating a bunch of elements to form a shape is both non-semantic and tedious.

• IE 7/8 won't work at all due to transform, border-radius, and nth-child.

• You'll notice the simple mathematical relationships between the size of the border radius, the width, and the height.

• This site shows many other interesting shapes that can be generated.

这篇关于是否有可能圆形？六边形，八边形等形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！