Generating a hexagonal shape using CSS

By utilizing pseudo elements to incorporate both the additional elements and the search icon, it becomes possible to have a single element in the HTML with a singular class that encompasses all necessary functionalities.
Question: I possess hexagon-shaped links.
Question: How can I generate a hexagonal shape using HTML and CSS, like in this image where the green section includes a search icon?
Solution 1: Have you considered creating a triangle instead?

Question:

In this image, learn how to use HTML and CSS to create
hexagonal shape
. Specifically, focus on the green-colored section with
search icon
.


Solution 1:

Have you considered creating a triangle instead?

#triangle-right {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 30px solid green;
  border-bottom: 50px solid transparent;
}

This website, located at https://css-tricks.com/the-shapes-of-css/, could provide assistance.

Here I played a bit









Triangle Right CSS

Result

Modify the colors and incorporate icons from Google’s collection of free icons at https://fonts.google.com/icons.

Additionally, the final result will be visually appealing. If you require any clarification or have inquiries, please inform me.


Solution 2:


Take a look at this code snippet where I utilized Font Awesome to incorporate a search icon.

html{background-color:grey}
.wrapper{
  margin:40px 0 0 40px;
  width:250px;
  height:40px;
  border-radius:20px;
  background-color:white;
}
.sub-wrapper{
  background-color:#3dce93;
  width:50px;
  border-radius:0 20px 20px 0;
  float:right;
}
.triangle-right {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-left: 6px solid white;
  border-bottom: 20px solid transparent;
}
.triangle-right i{
  position:relative; 
  top:-8px; 
  left:11px;
  color:white
}




Solution 3:


In order to ensure that the slopes of a hexagon (or a portion of it as mentioned in the question) are at 60 degrees, we must consider that the inner angle of a hexagon is 120 degrees.

To achieve this, one approach is to utilize linear-
gradient background
images at 60deg and -60deg, as shown in this code snippet. By incorporating these images along with the search icon using
pseudo elements
, it is possible to have a single HTML element with a single class that encompasses all the necessary elements.


  
  


  

Frequently Asked Questions

Posted in Css