How to Create Triangle in CSS ?
Last Updated :
10 Jun, 2022
In this article, we are going to learn how to use CSS properties to create a triangular shape. Normally there is no direct technique to create a triangle using CSS.
Approach: To create the triangle, in the HTML part we have to just add a single div for each triangle. The concept is to create a box with no width or height. The width of the border determines the Triangle’s actual width and height. The bottom border of an up-arrowed triangle, for example, is colored, while the left and right borders are transparent, forming a triangle. To make bottom-arrowed, left-arrowed, and right-arrowed triangles, we have to keep the top border, right border, and left border colored respectively.
Used Property (main-role):
- border-top: This CSS property is used to add a border on the top of an element, it takes the value of the border width and the color of the border.
- border-left: This CSS property is used to add a border on the left side of an element, it takes the value of the border width and the color of the border.
- border-right: This CSS property is used to add a border on the right side of an element, it takes the value of the border width and the color of the border.
- border-bottom: This CSS property is used to add a border to the bottom of an element, it takes the value of the border width and the color of the border.
The below example demonstrates the above approach.
Example 1: In the below code border-bottom property is used to make an up-arrowed triangle.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< style >
h1{
color: green;
margin: 2rem;
}
h3{
margin: 2.2rem;
margin-top: -2rem;
}
.up-arrow {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid green;
margin: 2rem;
}
</ style >
< title >How do CSS triangles work?</ title >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h3 >How do CSS triangles work?</ h3 >
< div class = "up-arrow" ></ div >
</ body >
</ html >
|
Output:
Example 2: In the below code border-top property is used to make a down-arrowed triangle.
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< style >
h1{
color: green;
margin: 2rem;
}
h3{
margin: 2.2rem;
margin-top: -2rem;
}
.down-arrow {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid green;
margin: 2rem;
}
</ style >
< title >How do CSS triangles work?</ title >
</ head >
< body >
< h1 >GeeksforGeeks</ h1 >
< h3 >How do CSS triangles work?</ h3 >
< div class = "down-arrow" ></ div >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...