You are currently viewing Hexagon Border Using CSS

Hexagon Border Using CSS

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.

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

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.

Hexagon Border Using CSS

.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;
}

 

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

 

Hexagon Border Using CSS
Hexagon Border Using CSS

 

Codepen 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+ Front-end Projects for Web developers (Source Code)

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

Leave a Reply