html - 丸みのある形状は可能ですか？六角形、八角形などの形状は？

Question

しばらくの間、六角形の角を丸くしようとしてきましたが、どの方法も機能しないことがわかりました。どうすればそれができるかについて何か提案はありますか？

Answer 1

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

ノート：

• 孤立した必要性がない限り、これはおそらく SVG またはキャンバスで行う方がよいでしょう。形状を形成するために多数の要素を作成することは、非意味的で退屈です。

• transform、border-radius、およびにより、IE 7/8 はまったく機能しませんnth-child。

• 境界線の半径のサイズ、幅、および高さの間の単純な数学的関係に気付くでしょう。

• このサイトには、生成できる他の多くの興味深い形状が示されています。