Hexagon Border Using CSS

Hey Guys, Welcome To Our Blog, In Today’s Blog We Are Going To See How To Create An Hexagon Border Using CSS. So,  Let’s Begin Our Hexagon Border Project By Adding The HTML and CSS Source Codes.

CSS’s border property can be customized to satisfy our requirements by using a hexagonal border, so we’ll add border styling in accordance with that.

For That, First, We Are Using The Html Code Hexagon Border.

50+ HTML, CSS & JavaScript Projects With Source Code

HTML Code For Hexagon Border

<div class="hexagon">bee hive</div>

Here We first simply creating and div class with name hexagon and style it using the CSS code. Also inside div class there is some contents written.

HTML Output:

CSS Code For Hexagon Border

.hexagon
{
  position: relative;
  width: 300px; 
  height: 173.21px;
  background-color: #64C7CC;
  margin: 86.60px 0;
}

.hexagon::before,
.hexagon::after
{
  content: "";
  position: absolute;
    left: 0; /* added */
  width: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
}

.hexagon::before
{
  bottom: 100%;
  border-bottom: 86.60px solid #64C7CC;
}

.hexagon::after
{
  top: 100%;
  width: 0;
  border-top: 86.60px solid #64C7CC;
}

.hexagon:hover
{
    background-color: red;
}

.hexagon:hover::before
{
    border-bottom-color: red;
}

.hexagon:hover::after
{
    border-top-color: red;
}

Restaurant Website Using HTML and CSS

Now the CSS code is added successfully. In first stanza we calling out the div class name hexagon and assigning the properties to it. The properties were width and height for sizes , positions, background color and margin.

Then we adding out the before and after properties to make some events on it. The properties for the event used is same as hexagon class but here additionally border-left and border-right.

.hexagon
{
  position: relative;
  width: 300px; 
  height: 173.21px;
  background-color: #64C7CC;
  margin: 86.60px 0;
}

.hexagon::before,
.hexagon::after
{
  content: "";
  position: absolute;
    left: 0; /* added */
  width: 0;
  border-left: 150px solid transparent;
  border-right: 150px solid transparent;
}

Now we adding out the code for hover effects which means the hexagon background color as well as border color that would change if we put the cursor on it.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

And filling out the color to entire hexagon using top and bottom CSS properties. It is also done with before:: and after:: property.

The code is given below for the explanation.

.hexagon::before
{
  bottom: 100%;
  border-bottom: 86.60px solid #64C7CC;
}

.hexagon::after
{
  top: 100%;
  width: 0;
  border-top: 86.60px solid #64C7CC;
}

.hexagon:hover
{
    background-color: red;
}

.hexagon:hover::before
{
    border-bottom-color: red;
}

.hexagon:hover::after
{
    border-top-color: red;
}

Final Output Of Hexagon Border Using CSS

Video Output Of Hexagon Border Using CSS:

Live preview of Hexagon Border Using CSS:-

Now We have Successfully created our Hexagon Border Using CSS. You can use this project for your personnel needs and the respective lines of code are given with the code pen link mentioned below.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

If you find out this Blog helpful, then make sure to search code with random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

REFER CODE – Gunnar Bitersman

WRITTEN BY – Ragunathan S