ADVERTISEMENT
ADVERTISEMENT

How do CSS triangles work?

Learn about the best methods to make a triangle in CSS.
Submitted by Shahnail Khan, on April 02, 2022

We can make all sorts of shapes on web pages with the help of CSS. We use CSS border property which serves this purpose. Different longhand properties of the border are applied to a single HTML element. We also add a width and height to get the exact size of shape we need.

Well, squares and rectangles are quite easy to make. Making a triangle is a bit tricky and there are different approaches to make it.

In this tutorial, we'll discuss the best method to make a triangle in CSS.

Example:

<!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">
      <title>CSS Triangles</title>
   </head>
   
   <style>
      .CssTriangles{
      border-color:#FF7F50 yellow  aqua teal;
      border-width: 150px 150px 150px 150px;
      border-style: solid;
      height: 0px;
      width: 0px;
      }
   </style>
   
   <body>
      <div class="CssTriangles"></div>
   </body>
</html>

Output:

Example | CSS Triangle (1)

All four borders have the same width of 150px. This creates 4 triangles of equal dimensions. We just want one triangle, right? Suppose we want a triangle of aqua color. To get only this triangle, we need to remove all the other three triangles.

The solution is:

.CssTriangles{
	border-color:transparent white  aqua transparent;
	border-width: 150px 150px 150px 150px;
	border-style: solid;
	height: 0px;
	width: 0px;
}

Change the value of border color to either "transparent" or "white". We want a triangle of aqua color, so no need to change the value of the border-bottom-color property.

Output:

Example | CSS Triangle (2)

Change the value of border color to either "transparent" or "white". We want a triangle of aqua color, so no need to change the value of the border-bottom-color property.

CSS Tutorial & Examples »


ADVERTISEMENT
ADVERTISEMENT


Comments and Discussions!



ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT

Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.