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?


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, could provide assistance.

Here I played a bit

Triangle Right CSS


Modify the colors and incorporate icons from Google’s collection of free icons at

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.

  margin:40px 0 0 40px;
  border-radius:0 20px 20px 0;
.triangle-right {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-left: 6px solid white;
  border-bottom: 20px solid transparent;
.triangle-right i{

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