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;
    border-radius: 10px;} 
#hexagon-circle:before { 
    content: ""; 
    position: absolute; 
    top: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-bottom: 29px solid red;
    border-radius: 10px;} 
#hexagon-circle:after { 
    content: ""; 
    position: absolute; 
    bottom: -25px; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent; 
    border-right: 50px solid transparent; 
    border-top: 29px solid red;
    border-radius: 10px;}

The output is 4 edges of hexagon is curved, but top and the bottom is not. I want to make all edge of hexagon curved. How to make top and bottom edge to be curved? or How to make the top edge of triangle to be curved?

http://jsfiddle.net/yR7zt/1

post the relevant html too please, or make a [Fiddle](http://www.jsfiddle.net). — Banana, Jul 18 '14 at 07:47
the approach you are using to make the hexagon won't allow you to make curved top and bottom. Are you able to use Css transform properties for your project? — web-tiki, Jul 18 '14 at 07:53

score 21 · Accepted Answer · edited Jul 12 '22 at 11:51

21

I think you are looking for this.

.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);
  transform: rotate(60deg);
}

.hex:after {
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

<div class="hex"></div>

edited Jul 12 '22 at 11:51

Lee Taylor

7,761
16
33
49

answered Jul 18 '14 at 07:53

Alex Char

32,879
9
49
70

That's the weirdest hexagon I've ever seen. – Albzi Jul 18 '14 at 07:56
Thats what I meant. In Firefox it seems to be okay. – Sebastian vom Meer Jul 18 '14 at 07:57

score 9 · Answer 2 · answered Apr 10 '15 at 11:20

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

Temani Afif · Answer 3 · 2020-12-30T08:45:41.903

I will consider the same trick I used in the previous answer Where I will build the hexagon using clip-path

.hex {
  width: 200px;
  display: inline-block;
  color:orange;
}

.hex::before {
  content: "";
  display: block;
  background:currentColor;
  padding-top: 90%;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

<div class="hex"></div>

Then I will apply an SVG filter:

.hex {
  width: 200px;
  display: inline-block;
  color:orange;
  filter: url('#goo');
}

.hex::before {
  content: "";
  display: block;
  background:currentColor;
  padding-top: 86.6%; /* 100%*cos(30) */
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

<div class="hex"></div>
<div class="hex" style="color:blue;width:150px;"></div>
<div class="hex" style="color:red;width:100px;"></div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

And in the opposite direction

.hex {
  width: 200px;
  display: inline-block;
  margin:0 5px;
  color:orange;
  filter: url('#goo');
}

.hex::before {
  content: "";
  display: block;
  background:currentColor;
  padding-top: 115%; /* 100%/cos(30)  */
  clip-path: polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
}

<div class="hex"></div>
<div class="hex" style="color:blue;width:150px;"></div>
<div class="hex" style="color:red;width:100px;"></div>


<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
        <filter id="goo"><feGaussianBlur in="SourceGraphic" stdDeviation="8" result="blur" />    
            <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
            <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
        </filter>
    </defs>
</svg>

This helped me a lot! Also this answers the question on how to make squircicles in the web. Unfortunately, it does not work in the newest Safari. — Fabian, Feb 18 '22 at 21:58

score 1 · Answer 4 · answered Jul 18 '14 at 08:00

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>

Its my pleasure @sooko1005 – Bindiya Patoliya Jul 18 '14 at 08:31 — Bindiya Patoliya, Jul 18 '14 at 08:31

Alessandro Incarnati · Answer 5 · 2014-07-18T08:26:58.503

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/

edited Jul 18 '14 at 08:26

answered Jul 18 '14 at 08:02

Alessandro Incarnati

7,018
3
38
54

2

why you guys not using standard approach (CSS3 properties) made by W3C.. Everyone is using vendor prefix `-webkit` for chrome. or you don't have any concern for other browsers. I just saw in FF30 and shocked it was not working then I noticed only prefix used for Chrome.. It would be a good practice to use the standard property and make a note to add a vendor prefix for other browser. – Kheema Pandey Jul 18 '14 at 08:05
Yes I agree... though 'shocked' seems exaggerated. Remember that this is not a site where we solve and deliver ready to deploy code for a client. Sometimes in our fiddles we explain how to approach a problem and then it's up to the user to fix these details after testing. Obviously I know about prefixes but in this case I just quickly edit his fiddle to show him a possible solution. – Alessandro Incarnati Jul 18 '14 at 08:19
2

but at first sight when I saw your Demo its doesn't work. Please use the standard approach. In addition to saving time you could simply add a one line text `please add vendor prefix for cross browser solution` – Kheema Pandey Jul 18 '14 at 08:21
1

Ok I have edited the answer. Now it's cross-browser. :) – Alessandro Incarnati Jul 18 '14 at 08:27

score 0 · Answer 6 · edited Jun 20 '20 at 09:12

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.

How to make a curved edge hexagon by using CSS

6 Answers6

Linked

Related