Image with hexagonal border in CSS

In this article we will apply the hexagon technique in CSS to insert a hexagonal border in CSS to an image.

Firstly, to use the image in a hexagon, we must learn how to create the geometric figure

Creating the hexagon with CSS

I’ll first show you the code and its final result:

/* CSS */
body {
 margin: 100px;
}

#hexagono {
 width: 100px;
 height: 105px;
 background-color: red;
 position: relative;
}

#hexagono:before {
content: "";
 position: absolute;
 top: 0px;
 left: 0px;
 width: 0;
 height: 0;
 border-left: 50px solid white;
 border-right: 50px solid white;
 border-bottom: 25px solid transparent;
}

#hexagono:after {
 content: "";
 position: absolute;
 bottom: 0px;
 left: 0;
 width: 0;
 height: 0;
 border-left: 50px solid white;
 border-right: 50px solid white;
 border-top: 25px solid transparent;
}

Well, inserting this code you can make the geometric figure, and also change its dimension if necessary

Just change the width and height of the main <div>, and also the edges, top and bottom of :after and :before, all proportionally

Remember that the styling on the body is not necessary, I just used it to detach the hexagon from the edges of the browser

What’s left now is to insert the desired image in the hexagon

Inserting the image into the hexagon

To finish our task, some changes will be needed.

Let’s remove the background-color and add some new rules for the background property

So let’s insert the image and center it, check it out:

#hexagono {
width: 100px;
height: 105px;
background: transparent url('matheus.jpeg') no-repeat; 
background-size: cover;
background-position: center center;
position: relative;
}

Note that the only piece of code changed, was the main <div> of the hex, where I made the above changes

We insert the image, guarantee that it won’t repeat and we centralize it

This is the final result:

And so we have the hexagonal border photo in CSS!

Remember that you need to add an existing image from your PC, this is obvious but it’s good to highlight that! 😀

Full Code

Below the full code for the lazy ones! 😀 (I include myself! Haha!)

<!-- HTML -->
<div id="hexagono"></div>
/* CSS */
body {
 margin: 100px;
}

#hexagono {
 width: 100px;
 height: 105px;
 background: transparent url('matheus.jpeg') no-repeat; 
 background-size: cover;
 background-position: center center;
 position: relative;
}

#hexagono:before {
 content: "";
 position: absolute;
 top: 0px;
 left: 0px;
 width: 0;
 height: 0;
 border-left: 50px solid white;
 border-right: 50px solid white;
 border-bottom: 25px solid transparent;
}

#hexagono:after {
 content: "";
 position: absolute;
 bottom: 0px;
 left: 0;
 width: 0;
 height: 0;
 border-left: 50px solid white;
 border-right: 50px solid white;
 border-top: 25px solid transparent;
}