How to create a hexagonal structure with an image covered using CSS3

Updated on September 3, 2019

In an attempt to create a hexagon shaped structure with an image inside the hexagon shape, I found many ways of doing it. Thought to share with you all hoping it would help you in some cases. They are :

1. Using border element of css.
2. Using a Hexagonal image template and making an image inscribed in it.
3. Using rotate() method.

and many more ways…..

We shall see each of the above methods one by one.

1. A Hexagon shaped structure with an Image inside using border elements of CSS.

In this, we shall create a shape using border-left and border-right elements as shown in fig-1 below. In our case, we shall replace the red color with the background color, so that the hexagon shape is obtained. And the image would fit at the center white hexagonal shape.

Hexagonal structure using HTML and CSS
Hexagonal structure using HTML and CSS

Based on the width and height of the image, you need to adjust the border-left and border-right of the hexagon span tag and also the border-bottom and border-top of top and bottom span tags.

Use the below stylesheet in the head tag of your HTML page.

<style>
.hexagon span {
    position: absolute;
    display: block;
    border-left: 100px solid #fff;
    border-right: 100px solid #fff;
    width: 200px;
    float:left;
}
.top {
    top: 0;
    border-bottom: 173px solid transparent;
}
.bottom{
    bottom: 0;
    border-top: 173px solid transparent;
}
.hexagon {
    background: url("model.JPG");
    width: 400px;
    height: 295px;
    position: relative;
    display: inline-block;
}
</style>

Use the below in the body tag of your HTML page :

<div class="hexagon pic">
<span class="top"></span>
<span class="bottom"></span>
</div>

With the above code, we would get the hexagonal shape with an image inside the hexagon shape is as shown below :

Hexagonal Shaped structure with image inside
Hexagonal Shaped structure with image inside

The other way of representing the hexagonal shape with same method is as shown below in fig 3.

Hexagonal structure using HTML and CSS
Hexagonal structure using HTML and CSS

Use the below stylesheet in your head tag:

<style>
.hexagon1 span {
    position: absolute;
    display: block;
    float:left;
border-left: 170px solid #fff;
border-right: 170px solid #fff;
}

.top1 {
top: 0;
border-top: 0px solid transparent;
 border-bottom: 75px solid transparent;
}

.bottom1{
bottom: 0px;
border-bottom: 0px solid transparent;
border-top: 75px solid transparent;
}

.hexagon1 {
    background: url("model.JPG");
    width: 340px;
    height: 295px;
    position: relative;
    display: inline-block;
}
</style>

Use the below in the body tag of your HTML page :

<div class="hexagon1 pic">
<span class="top1"></span>
<span class="bottom1"></span>
</div>

With the above code, we would get the hexagonal shape with an image inside the hexagon shape is as shown below :

Hexagonal Shaped structure with image inside
Hexagonal Shaped structure with image inside

2. Using a ready Hexagonal shaped image template and making an image inscribed in it.

This would be much simpler with no hiccups of the code. Firstly we shall create a Hexagon shaped image template as shown below and will put our image inside it with the below code.

hexagon shaped templates
hexagon shaped templates

Insert the below code in stylesheet of your HTML page.

<style>
.hex-template {
background:url("nature_world.jpg") no-repeat;
width: 491px;
height: 385px;
float:left;
}
.hex-template2 {
background:url("nature_world.jpg") no-repeat;
width: 392px;
height: 451px;
float:left;
}
</style>

Insert the below code in the body tag of your HTML page.

<div class="hex-template"><img src="hexagon.png" /></div>
<div class="hex-template2"><img src="hexagon1.png" /></div>

With the above code, we would get the image inside the hexagonal shaped structure as shown below :

Hexagonal Shaped structure with image inside
Hexagonal Shaped structure with image inside

3. Using rotate() method of CSS3 transform to create a hexagonal shaped structure with an image inside it

The CSS transform property allows you to visually manipulate element, literally transforming their appearance. There are several different transform functions each that applies a different visual effect. Rotate() is one such which rotates clockwise from current position. So we shall create an initial box with shadow of white as shown below:

Initial box position with white shadow
Initial box position with white shadow
.hex:after {
content: '';
position: absolute;
top: 40%;
left: 43%;
width: 12%;
padding-top: 12%;
transform: rotatex(0deg) rotate(0deg);
text-align: center;
box-shadow: 0 0 0 30px white;
}

With the rotate() transform property, we shall rotate with 45 degrees to make it rhombus and with rotatex() we shall rotate the box on it x-axis as shown below :

The initial position is rotated 45 degrees
The initial position is rotated 45 degrees
transform: rotatex(53deg) rotate(45deg);

Then adjust the width, padding-top to get the structure as shown below:

Intermediate position of the hexagon
Intermediate position of the hexagon
.hex:after {
content: '';
position: absolute;
/* top: 40%; */
left: -10%;
width: 120%;
padding-top: 120%;
transform: rotatex(53deg) rotate(45deg);
text-align: center;
box-shadow: 0 0 0 40px white;
}

Adjust the box-shadow to hide out the excess of the hexagon structure with the background color ie., in the example white.

box-shadow: 0 0 0 175px white;

To get the final hexagonal structure with image inside as shown below.

Hexagonal Shaped structure with image inside using rotate() of CSS3 transform
Hexagonal Shaped structure with image inside using rotate() of CSS3 transform

Below is the complete code:

<style>
.hex  {
  position:relative;
  margin:auto;
  text-align:center;
  overflow:hidden;
  white-space:nowrap;
  display:table;
  float:left;
  margin-right:20px;
}
.hex:before {
  content:'';
  padding-top:120%;
  display:inline-block;
  vertical-align:middle;
}
.hex:after {
  content:'';
  position:absolute;
  top:0%;
  left:-10%;
  width:120%;
  padding-top:120%;
  transform: rotatex(52deg) rotate(45deg);
  text-align:center;
  box-shadow:0 0 0 200px white;;
}
.hex img {
  display:inline-block;
  vertical-align:middle;
  margin:0 -10px;
}
</style>

<div class="hex"><img src="nature_world.jpg" /></div>

You can also adjust the transform with below to get the other hexagonal structure as shown below:

transform: rotatey(55deg) rotate(-45deg);
Hexagonal Shaped structure with image inside using rotate() of CSS3 transform
Hexagonal Shaped structure with image inside using rotate() of CSS3 transform

Was this article helpful?

Related Articles

Leave a Comment