Creating Triangle using HTML and CSS

Salow
December 11, 2021
CSS, Shape

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!

Creating Triangle using HTML and CSS

CSS Properties Definitions

Code Block

Video Tutorial

Creating Six Sided Star for rating using HTML and CSS

Creating Diamond using HTML and CSS