How to make a curved edge hexagon by using CSS

Question

This is my CSS.

CSS

#hexagon-circle { 
    width: 100px; 
    height: 55px; 
    background: red; 
    position: relative;
    borde         


        

Answer 1

You can try this approach:

CSS

#hexagon-circle { 
position: relative;
margin: 1em auto;
width: 10em;
height: 17.32em;
border-radius: 1em/.5em;
background: red;
transition: opacity .5s;
cursor: pointer;} 

#hexagon-circle:before { 
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
-webkit-transform: rotate(60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(60deg);  /* IE 9 */
transform: rotate(60deg);} /* Firefox 16+, IE 10+, Opera */

#hexagon-circle:after { 
position: absolute;
width: inherit;
height: inherit;
border-radius: inherit;
background: inherit;
content: '';
-webkit-transform: rotate(-60deg);  /* Chrome, Opera 15+, Safari 3.1+ */
-ms-transform: rotate(-60deg);  /* IE 9 */
transform: rotate(-60deg);} /* Firefox 16+, IE 10+, Opera */

DEMO

http://jsfiddle.net/yR7zt/4/