Create Beautiful Hexagon Shapes With Pure CSS3

Create Beautiful Hexagon Shapes With Pure CSS3


Create Beautiful Hexagon Shapes With Pure CSS3

Introduction

In this tutorial, we are going to make hexagon shapes that support HTML content and also background image with just CSS3. CSS3 has been an amazing revision in creating more advanced styling. Don't believe me? Check this awesome graphic coded purely with CSS.

With CSS Transform, we can easily skew, rotate and other manipulations on DOM element. We are going to use CSS3 rotate and masking to achieve what we want. This tutorial will be slightly complicated in CSS part, and I have tried my best to explain it with illustrations. Alright, let's get started.

HTML

This hexagon can have two different styles. You can either put text content in it or just pure image. The HTML markup is quite similar and they also share the same CSS.

Referring to the HTML markup below, there are two div called .corner-1 and corner-2, we will rotate these two divs to 60 degree to create the shape we want.

<div class="hex hex-3">		
	<div class="inner">
			<h4>CONTACT US</h4>
			<hr />
			<p>We Open Everyday</p>
	</div>		
	<a href="#"></a>
	<div class="corner-1"></div>
	<div class="corner-2"></div>		
</div>	

<div class="hex" style="background-image: url(images/2.jpg);">		
	<a href="#"></a>		
	<div class="corner-1"></div>
	<div class="corner-2"></div>		
</div>

CSS

Alright, it will be a little bit complicated in CSS section. A hexagon has six edges and each angle is 60 degree. We are going to build a hexagon with 3 rectangles. Referring to the picture below, in step 1 to 3, we are placing 2 rectangles on top of the main one and rotate them 60 degree. That's how a hexagon is made.

For the background image, there is more work to make it display correctly. Because we have rotated both corners, the background image is rotated as well. Therefore, to rectify this, we will be using :before to duplicate its content, rotate it back, make it a square, and mask it with overflow:hidden.

Here I have another illustration to let you see it a little bit more clearly.

.hex {
	width:150px;
	height:86px;
	background-color: #ccc;
	background-repeat: no-repeat;
	background-position: 50% 50%;			
	background-size: auto 173px;							
	position: relative;
	float:left;
	margin:25px 5px;
	text-align:center;
	zoom:1;
}
		
	.hex.hex-gap {
		margin-left: 86px;
	}
	
	.hex a {
		display:block;
		width: 100%;
		height:100%;
		text-indent:-9999em;
		position:absolute;
		top:0;
		left:0;
	}

	.hex .corner-1,
	.hex .corner-2 {
		position: absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		background: inherit;								
		z-index:-2;						
		overflow:hidden;		
		backface-visibility: hidden;			
	}
	
	.hex .corner-1 {
		z-index:-1;
		transform: rotate(60deg);
	}
	
	.hex .corner-2 {
		transform: rotate(-60deg);
	}
	
	.hex .corner-1:before,
	.hex .corner-2:before {
		width: 173px;
		height:	173px;
	  content: '';
	  position: absolute;
	  background: inherit;
	  top:0;
	  left: 0;
	  z-index: 1;
	  background: inherit;
	  background-repeat:no-repeat;
		backface-visibility: hidden;				  
	}			
	

	.hex .corner-1:before {
		transform: rotate(-60deg) translate(-87px, 0px);	
	  transform-origin: 0 0;
	}			
	
	.hex .corner-2:before {
		transform: rotate(60deg) translate(-48px, -11px);	
		bottom:0;
	}		


	
	/* Custom styles*/
	.hex .inner {		
		color:#eee;
	}
	
	.hex h4 {
		font-family: 'Josefin Sans', sans-serif;		
		margin:0;			
	}
	
	.hex hr {
		border:0;
		border-top:1px solid #eee;
		width:60%;
		margin:15px auto;
	}
	
	.hex p {
		font-size:16px;
		font-family: 'Kotta One', serif;
		width:80%;
		margin:0 auto;
	}

	.hex.hex-1 {
		background: #74cddb;
	}
	
	.hex.hex-2 {
		background: #f5c53c;
	}
	
	.hex.hex-3 {
		background: #80b971;
	}

Conclusion

This hexagon shape tutorial is pretty straight forward. It took me a while to figure it out and along the process of experiementing, I did pick up a few tricks such as CSS transform and masking. I hope you enjoy this, if you have any questions, drop us a comment. If you liked this, please share it via social media. Thanks :)

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

28 comments

Ahmed
Tue, 26th February 2013
Surely, I'm amazed with CSS3. I will use this technique in my project. Thanks. :) Reply
Kishore
Tue, 26th February 2013
Thank you so much for posting such article, Its really amazing to learn this kind of tutorials. I am pretty much interested in CSS3. I am starting my day by reading your article. Thanks a lot. Reply
Underworld Magazines
Wed, 27th February 2013
Awesome thanks for this. Reply
Fábio Portugal
Thu, 14th March 2013
Great tuto! Now if you just managed to mix this one with this: http://www.queness.com/post/8881/create-a-twitter-feed-with-attached-images-from-media-entities and also pick only images from twitter. Then you'd be my favorite person on the whole World!!! I'm gonna give it a try, but i'm no pro and know no javascript! Reply
Mario
Sat, 23rd March 2013
Great tutorial!

Can this work inside a CMS like Joomla?

Thank you! Reply
Kevin Liew Admin
Sun, 24th March 2013
Hi Mario, I'm pretty sure you can but you will have to play with the PHP script to make it generates the right markup. Reply
Derek Buntin
Mon, 6th October 2014
Hi Mario,

I'll be doing this right now, let me know if your interested and i'll pass over the code once completed, of course it might be easier to let me know what you're trying to achieve so i can apply the details, i'll need to ensure its responsive too of course.

Reply
Loni
Thu, 4th April 2013
Any Idea what you would change if you wanted the hexagons larger? Ive been playing around with it but cant seem to get it right.. Reply
Nicklas Jarnesjö
Wed, 17th April 2013
Great article just what I was looking for!

But one thing I didn't really get is how should I calculate if I want to scale up the hexagon.

In the example your building the hexagon with the width of 173 px.
I can see the pattern in .hex-1:before when the translate is half the value but can't see the pattern when I'm looking at .hex-2:before and also I find hard to figure it out how the get right values i width and height on .hex as a pattern.

Hope you understand what I mean. For example I want to build hexagons with the size of 260 px. How should I calculate to get it right?
Reply
Daisuke Ihochi
Sat, 29th June 2013
Hello Nicklas.
I think 173px is calculated like this.
First :
if you want to scale up the hexagon 260px.
Width of ".hex" => 260px
Height of ".hex" => 260*tan(30°)=150
Next:
then. 173px is height of hexagon.
So.you can calculate it from two times the height.
=>150px *2 = 300px
This is the hexagon height when you scale up to 260px. Reply
G. Brown
Fri, 26th April 2013
Great idea! Thanks for sharing :)

For those that are attempting to create different sized hexagons, you will need to use values that are common denominators of the existing width and height values to maintain the ratios, otherwise you end up with fractions that don't work. Reply
Interdruper
Fri, 3rd May 2013
Fantastic tutorial, thanks!

I have coded a COMPASS/SCSS version of your code, including hexagon scaling feature.

Code is available at: http://codepen.io/interdruper/details/GrBEk Reply
Roberto
Fri, 17th May 2013
For those who want to modify the dimensions of the hexagones, check here: http://hexnet.org/content/hexagonal-geometry

Reply
Mika
Sat, 25th May 2013
Wow! Great tut man! thx!
Works great too!

One Q: How to fill hole hexegon with photo correctly without space around it? Now I have to leave some free space around my centered images in hexagon. Reply
kishan sharma
Fri, 28th June 2013
Great Tutorial man... found unresting i will use this in my next project.. though it seems to have some compatibility issues but ya we have a large arena of jquery plugin though which will help me though Reply
Ramesh Khanal(web designer)
Fri, 2nd August 2013
Thank you so much for posting such article, Its really amazing to learn this kind of tutorials. I am pretty much interested in CSS3. I am starting my day by reading your article. Thanks a lot. Reply
IFo Hancroft
Fri, 13th December 2013
Can you please explain your code a little more?
Like what does what do?
Where some of the sizes come from?
Like are they relative to something etc?
Do some sizes have to be bigger than others (Like the pixels of translate of .hex .corner-2:before are they relative to the pixels of the divs with and height)?
You just given the code and explain only the basic idea.
I need an opposite hexagon (with the height of its main div larger than its width etc) and I start writing it follow the tutorial and can't really get the background image to show properly (Clearly I am putting some sizes and degrees wrong but I don't know what should I put that will work with my div's dimensions and how to modify the code from the tutorial according to my needs).

In short: Please explain the code in the tutorial. What comes from where? What does it do? Where this sizes comes from? What does it do? Why is it this size? If you change its size how that changes the whole thing? Reply
Youri van Dijk
Tue, 17th December 2013
Great tutorial! I did find one other tutorial which seemed a lot easier regarding CSS. What do you think of the example by James Tauber
http://bit.ly/1bWKzPJ
The addition of using the :before and :after makes sure that only 1 div is needed. Reply
Timon G.
Tue, 14th January 2014
You talk about the ''css trangle border hack'', thats great for one color stuff Kevin's is about pictures. Or you can use my jquery plugin ;) -link below- Reply
Timon G. (Junior Webdesigner)
Thu, 19th December 2013
Hey awsome Tutorial.
I started to work on a jquery plugin for this.
https://github.com/tpmdud/dodecagondiv
Its for hexagon div's and many more.
Hope you like it. Reply
viomjeet
Sat, 26th April 2014
Where is demo page >??? Reply
Karl Barrière
Wed, 12th February 2014
Great tutorial, thank you!

Only thing: I thought for a couple of minutes that it did not work because -webkit-/-moz-/etc wasn't include in your transform. It's not much, but enough for the beginners to feel a little lost.

But it may be just that I'm highly sleep-depraved! Reply
viomjeet
Sat, 26th April 2014
but how to create a profile picture in this shape without background image :( Reply
sergio
Fri, 13th June 2014
Thanks man, cool tutorial.
I noticed a pretty significant issue though when using a background image inside the hexagon. A slight cutoff appears in between the top middle and bottom of the shape and makes the image look jagged. You don't notice it on the demo because most of the imagery is centered with a lot of colored space around it. Anyone have a fix for this? Reply
pravallika
Mon, 14th July 2014
Thank you very much Reply
Jurriën Dokter
Tue, 15th July 2014
I am very interested in these hexagons, I just have one problem. I need the entire thing rotated 30 degrees to the right, without rotating the content.(or rotating everything back).

Do you have any suggestions on how to do this? Reply
neer
Sat, 30th August 2014
Mithu
Fri, 17th October 2014
Cool! Thnkx buddy Reply

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement