Html 有可能是圆形的吗？六边形、八角形等形状？

我试着把六边形的角弄圆有一段时间了，但是我发现我的方法都不管用。你们有什么建议吗

HTML 注:

除非是单独的需要，否则最好使用SVG或画布。创建一组元素来形成一个形状既没有语义，也很乏味

由于变换、边界半径和第n个子元素，IE 7/8根本不起作用

您将注意到边界半径大小、宽度和高度之间的简单数学关系

显示了可以生成的许多其他有趣的形状

---

CSS不是一个很好的wap来实现这一点。尝试使用SVG。尝试使用SVG，但由于大量工作和多个元素，可能无法使用：@TimMedora您应该将此作为答案发布。嗨，Tim Medora。我有一个关于边界半径大小、宽度和高度之间的简单数学关系的问题，你能帮我找到这些关系吗？提前谢谢。@DonovanCharpin-这里有一个修改过的小提琴，演示了它们之间的关系：。高度=宽度*1.5，边界半径=宽度*25。老实说，我不知道为什么这适用于由三个相等的矩形组成的圆角六边形的几何结构。谢谢你的快速回答。在此，如果边缘长度等于100，则短对角线约为173，因此比率为高度=宽度*1.73。对于边界半径，我找不到与高度和宽度一致的值。。。在JSFIDLE中，我可以写边界半径：1em/0.5em；就像这样。但是我的最新版本的LESSCS有一个问题，它计算2em，与1em/0.5不一样。。。该死更新是否尝试分割边界半径，或在不同的边上设置不相等的值？在普通CSS中，1em/.5em在矩形的两侧设置不同的边界半径。较少的CSS会分割该表达式，导致不同的结果。要在普通CSS中分割，您需要calc1em/.5。我希望保持边界半径：1em/0.5em；但如果没有计算，则更少计算2米。所以我不能得到这个表达式边界半径：1em/0.5em；用更少的。。。

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

.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);
}