Connect with us!
Creating Triangle using HTML and CSS
Triangle can be created by using border left, border right, border bottom. Triangle is a simple shape which is created by using CSS and HTML.
CSS Properties Definitions
The CSS border-left is property specified to remove left side
The CSS border-right is property specified to remove right side
The CSS border-bottom is property specified to display the triangle shape
Code Block
Here is the code for creating a rectangle:
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #99d3ff;
}And, here is the output:
Video Tutorial
You can find the complete coding tutorial in the following YouTube Video
Here is the complete HTML and CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #99d3ff;
}
</style>
<title>Salow Studios</title>
</head>
<body>
<h1>Triangle</h1>
<div class="triangle"></div>
</body>
</html>Thank you for reading. I hope that it has helped you with your project. Good luck and happy coding!
