CSS How to Create a Hollow Triangle in CSS

In this article, we’ll show you how to create a hollow triangle using CSS. Hollow triangles are often used in web design and can be used to indicate arrows, drop-down menus, and more.

Read more: CSS Tutorial

Method 1: Using the border property

To create a hollow triangle, we can use the CSS border property by setting the three borders to transparent.

.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #000;
}

In the example above, we set an element with a width of 0 and a height of 0, then set the three borders to transparent using the border property. Finally, we set the border-bottom property to solid black.

Method 2: Using Pseudo-Elements

Another way to create a hollow triangle is to use the CSS pseudo-elements ::before and ::after. This method allows you to add more styling and effects to the triangle.

.triangle { 
position: relative; 
width: 0; 
height: 0; 
} 

.triangle::before, 
.triangle::after { 
content: ""; 
position: absolute; 
bottom: 0; 
} 

.triangle::before { 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-bottom: 100px solid #000; 
} 

.triangle::after { 
width: 0; 
height: 0; 
border-left: 50px solid transparent; 
border-right: 50px solid transparent; 
border-top: 100px solid #fff; 
}

In the example above, we create an element with 0 width and 0 height and use ::before and ::after to style the top and bottom of the triangle. By adjusting the values ​​of the border-* properties, we can change the size and shape of the triangle.

Method 3: Using the clip-path Property

The clip-path property in CSS can be used to clip an element’s shape or create a hollow triangle.

.triangle {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 50px solid #000;
border-bottom: 50px solid transparent;
clip-path: polygon(0 0, 100% 0, 50% 100%);
}

In the example above, we set an element with a width of 0 and a height of 0 and use the border-* properties to style the three sides of the triangle. Finally, we use the clip-path property to clip the element to the triangle shape.

Method 4: Using SVG

In addition to using CSS, we can also use SVG to create hollow triangles.

<svg width="100" height="100"> 
<polygon points="0,100 50,0 100,100" fill="none" stroke="#000" stroke-width="1"></polygon>

</svg>

In the example above, we use the <polygon> element to define a polygon with three points. By adjusting the coordinates of the points, we can change the shape and size of the triangle.

Summary

This article introduced four methods for creating hollow triangles in CSS: using the border property, using pseudo-elements, using the clip-path property, and using SVG. Each method has its advantages and disadvantages, and you can choose the appropriate method based on your specific needs. I hope this article helps you create hollow triangles in your web design!