HTML-CSS: Triangle

Last update on March 08 2024 13:35:23 (UTC/GMT +8 hours)

HTML-CSS : Exercise-32 with Solution

Using HTML, CSS creates a triangular shape with pure CSS.

Use three borders to create a triangle shape.
All borders should have the same border-width (20px).
The opposite side of where the triangle points towards (i.e. top if the triangle points downwards) should have the desired border-color. The adjacent borders (i.e. left and right) should have a border-color of transparent.
Altering the border-width values will change the proportions of the triangle.

HTML Code:

<!--License: https://bit.ly/3GjrtVF--><!-- Comment: Indicates the license information for the code -->
<!DOCTYPE html><!-- Comment: Declares the document type and version of HTML -->
<html><!-- Comment: Indicates the start of the HTML document -->
<head><!-- Comment: Contains meta-information about the HTML document -->
<meta charset="utf-8"><!-- Comment: Declares the character encoding for the document -->
<meta name="viewport" content="width=device-width"><!-- Comment: Sets the viewport width to the width of the device -->
<title>Using HTML, CSS creates a triangular shape with pure CSS</title><!-- Comment: Sets the title of the document -->
</head><!-- Comment: End of the head section -->
<body><!-- Comment: Contains the content of the HTML document -->
<div class="w3r-triangle"></div><!-- Comment: Defines a div for the triangular shape -->
</body><!-- Comment: End of the body section -->
</html><!-- Comment: End of the HTML document -->

Explanation:

This HTML code creates a simple webpage with a div element to represent a triangular shape.
The  comment indicates the license information for the code.
<!DOCTYPE html> declares the document type and version of HTML, which is HTML5.
<html> marks the start of the HTML document.
<head> contains meta-information about the HTML document, such as character encoding and viewport settings.
The <title> element sets the title of the webpage.
<body> contains the content of the HTML document.
The <div class="w3r-triangle"></div> creates a div with the class "w3r-triangle" for the triangular shape.

CSS Code:

<style> /* Comment: Begins the CSS styling for the HTML document */
.w3r-triangle { /* Comment: Styles the element for the triangular shape */
  width: 0; /* Comment: Sets the width of the element to zero */
  height: 0; /* Comment: Sets the height of the element to zero */
  border-top: 40px solid #CC85DD; /* Comment: Creates the top border of the triangle with a specific color */
  border-left: 40px solid transparent; /* Comment: Creates the left border of the triangle as transparent */
  border-right: 40px solid transparent; /* Comment: Creates the right border of the triangle as transparent */
}
</style> /* Comment: End of the CSS styling */

Explanation:

.w3r-triangle styles the element for the triangular shape.
width: 0; sets the width of the element to zero, effectively creating a pointy top for the triangle.
height: 0; sets the height of the element to zero, making it invisible as it doesn't occupy any space.
border-top: 40px solid #CC85DD; creates the top border of the triangle with a specific color (#CC85DD).
border-left: 40px solid transparent; creates the left border of the triangle as transparent, resulting in a diagonal line.
border-right: 40px solid transparent; creates the right border of the triangle as transparent, resulting in another diagonal line.

HTML-CSS Editor:

See the Pen html-css-practical-exercises by w3resource (@w3resource) on CodePen.