Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create triangle in CSS?
Triangles are a basic shape in geometry and useful in creating a variety of designs in web development. In CSS, triangles can be created using a few simple techniques. In this article, we will learn two techniques to create triangles in CSS.
Using Borders to Create Triangles
Using Clip Path to Create Triangles
Using Borders to Create Triangles
The easiest way to create a triangle in CSS is by using the border property. By creating a rectangular element and then using the border property to create the sloping edges of the triangle, we can quickly create a basic triangle shape. Here is an example of how to create an equilateral triangle using borders −
Example 1
create an equilateral triangle in CSS by using the border property.
<html>
<head>
<style>
body{
text-align:center;
}
.triangle {
margin:auto;
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
</style>
</head>
<body>
<h3>Equilateral Triangle Example Using Border Property</h3>
<div class="triangle"></div>
</body>
</html>
In the above example, we create a div with the class of .triangle and set the width and height of the element to 0, since we will be using the border property to create the triangle. We set the border-bottom property to create the base of the triangle, and set the border-left and border-right properties to create the sloping edges. By setting the left and right borders to transparent, we create a diagonal edge that slopes towards the center of the element.
Using Clip Path to Create Triangles
We also can create triangles in CSS by using the clip-path property. This property allows us to define a custom clipping path for an element, which can be used to create a variety of shapes, including triangles.
Example 2
Here is an example of how to create a scalene triangle using clip-path.
<html>
<head>
<style>
body {
text-align: center;
}
.triangle {
margin: auto;
padding: 10%;
border-radius: 2%;
width: 10%;
box-shadow: inset 0 0 80px violet;
clip-path: polygon(50% 0, 100% 100%, 0% 100%);
}
</style>
</head>
<body>
<h3>Equilateral Triangle Example Using Border Property</h3>
<div class="triangle"></div>
</body>
</html>
In the above example, we create a div with the class of .triangle and set the width and height of the element to 0, since we will be using border and clip-path properties to create the triangle. We set the border-radius property to create the sloping edge and then use the clip-path property to clip the rectangular element into a triangle shape by specifying the coordinates of the three vertices. The polygon function takes a list of x,y coordinates as arguments, with each point separated by a comma.
Conclusion
Creating triangles in HTML and CSS can be a valuable skill for web developers. By using the border and clip-path properties, we can quickly create basic equilateral and scalene triangles to enhance the visual design of the web pages.
2K+ Views
