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

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

Topics :

vps germany

Get Free Email Updates

Disclaimer: The content published in this article is the views of the author only. Techglimpse does not gurantee accuracy, completness or validity. If you believe the content on this post violates your copyright, please send us a mail for removal. Read more.