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

I understand this is a fairly old question, but I thought I'd add an answer to show more about how it works.

So, first off, we need to create a single element on the page. I have gone for a size of height:300px; width:180px; and a border radius of 10px. Just because I like the roundness of the number (forgive the pun). Giving this element a position:relative; means that we can herein position everything absolutely in relative terms to this div.

We then need to create two pseudo elements, with the same height and width as the parent.

Because the pseudo elements are exactly that, pseudo elements, we need to add a content: to them. And since because we can put stuff within the parent, we don't really need these, so set them to "";

this leads us onto how to create the hexagon, rather than the rectangle we currently have. To do that, we're going to have to include a rotation in order to generate the other sides of the hexagon. With there being 6 sides, and the angles needing to add to 360, we can rotate one of the pseudo element by 60 degrees. The other we'll rotate by -60 degrees (or 300degrees, if you'd prefer).

This leaves us with our 'hexagon' in which we can add some nice styling and hover animations as need be:

.roundHex {
  position: relative;
  margin: 0 auto;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  height: 300px;
  width: 180px;
  transition: all 1s;
  line-height:300px;
  text-align:center;
  color:white;
  font-size:20px;
}
.roundHex:before,
.roundHex:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: inherit;
  border-radius: inherit;
  height: 100%;
  width: 100%;
  z-index:-1;
}
.roundHex:before {
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  transform: rotate(60deg);
  transition: all 1s 0.5s;
}
.roundHex:after {
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  transform: rotate(-60deg);
  transition: all 1s 1s;
}
.roundHex:hover {
  background: tomato;
}

<div class="roundHex">HOVER ME</div>

Jsfiddle demo also available

Answer 2

Try this way :(works in chrome and in ie 10)

<br><br><br>
<div id="hexagon-circle"></div>
<style>
 #hexagon-circle {
    position: relative;
    margin: 1em auto;
    width: 10em; height: 17.32em;
    border-radius: 1em/.5em;
    opacity: .25;
    background: orange;
    transition: opacity .5s;
    cursor: pointer;
 }
 #hexagon-circle:before, #hexagon-circle:after {
    position: absolute;
    width: inherit; height: inherit;
    border-radius: inherit;
    background: inherit;
    content: '';
  }
  #hexagon-circle:before {
   transform: rotate(60deg);
   -ms-transform:rotate(60deg); /* IE 9 */
   -webkit-transform:rotate(60deg); /* Opera, Chrome, and Safari */
  }
  #hexagon-circle:after {
    transform: rotate(-60deg);
    -ms-transform:rotate(-60deg); /* IE 9 */
    -webkit-transform:rotate(-60deg); /* Opera, Chrome, and Safari */
  }

  </style>

Answer 3

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/

Answer 4

With your current code, using the triangle top and bottom, you can modify them slightly to give it a curved look. Add a width of 4px to #hexagon-circle:before and #hexagon-circle:after and reduce border-left and border-right by 2px each.

Js Fiddle here

#hexagon-circle { 
  width: 100px; 
  height: 55px; 
  background: red; 
  position: relative;
  border-radius: 10px;
}

#hexagon-circle:before { 
  content: ""; 
  position: absolute; 
  top: -25px; 
  left: 0; 
  width: 4px; 
  height: 0; 
  border-left: 48px solid transparent; 
  border-right: 48px solid transparent; 
  border-bottom: 29px solid red;
  border-radius: 10px;
}

#hexagon-circle:after { 
  content: ""; 
  position: absolute; 
  bottom: -25px; 
  left: 0; 
  width: 4px; 
  height: 0; 
  border-left: 48px solid transparent; 
  border-right: 48px solid transparent; 
  border-top: 29px solid red;
  border-radius: 10px;
}

It's not a true curve as it creates a straight line, however it gives the impression it might be curved when viewed in the context of the shape.

Answer 5

I think you are looking for this.

css

.hex {
  position: relative;
  margin: 1em auto;
  width: 10em; height: 17.32em;
  border-radius: 1em/.5em;
  background: orange;
  transition: opacity .5s;
}
.hex:before, .hex:after {
  position: absolute;
  width: inherit; height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
}
.hex:before {
   -webkit-transform: rotate(60deg);
   -ms-transform: rotate(60deg);/*Added for IE9*/
   transform: rotate(60deg);
}
.hex:after {
  -webkit-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);/*Added for IE9*/
  transform: rotate(-60deg);
}

fiddle