Is it possible to rounded shapes? Shapes such as hexagon, octagon? [closed]

问题

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 6 years ago.

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?

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

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.

来源：https://stackoverflow.com/questions/14665093/is-it-possible-to-rounded-shapes-shapes-such-as-hexagon-octagon