ReactJs useDebugValue Hook

How to Create Triangle with CSS?

Last Updated : 15 Nov, 2024

Creating a triangle in CSS involves a clever use of borders to form various shapes without actual images. By setting the width and height of an HTML element to zero and applying specific borders, you can create directional triangles.

To create a triangle:

Add a single <div> element in your HTML for each triangle.
Set the width and height of the <div> to zero.
Use the border property to create the triangle by defining the thickness and color of one side of the border, while setting the other sides to transparent.

1. Upward-Facing Triangle

To create an upward-facing triangle, we use the border-bottom property with a specified color and set the border-left and border-right properties to transparent.

HTML

<h3 >How do CSS triangles work?</h3>

<div style="width: 0; height: 0; border-left: 50px solid transparent; 
            border-right: 50px solid transparent; 
            border-bottom: 50px solid green; margin: 2rem;">
</div>

Output

upward-triangle

upward-triangle

2. Downward-Facing Triangle

To create a downward-facing triangle, we use the border-top property, with the left and right borders set to transparent.

HTML

<h3>How do CSS triangles work?</h3>

<div style="width: 0; height: 0; border-left: 50px solid transparent; 
            border-right: 50px solid transparent; 
            border-top: 50px solid green; margin: 2rem;">
</div>

Output

Triangle-in-CSS-Example-Output

Triangle in CSS Example Output

ReactJs useDebugValue Hook

P

priyanshuchatterjee01

Improve

Article Tags :

Similar Reads

How to create a Triangle using CSS clip-path ?

In this article, we will see how we can create a triangle using CSS clip-path property. The CSS clip-path property is used to clip the particular section of the image such that the part of the image inside the section is shown and part of the image outside the section is not shown. Syntax: clip-path

How to Create Dividers with CSS ?

A divider is a crucial element in web design to visually separate content and enhance the overall layout. In CSS, there are several approaches to creating dividers, each offering flexibility and customization options. We can achieve this effect in many ways like CSS Border Property, Pseudo-elements,

How to Create Shapes using CSS ?

CSS shapes allow web developers to create a wide variety of geometric figures using simple CSS properties. These shapes can range from basic squares and circles to more intricate polygons like stars and hexagons. This guide will walk you through how to create different shapes using CSS, providing pr

How to Create a Text Divider with CSS?

A text divider is a visual element used to separate content within a web page providing clarity and improving readability. In CSS we can create text dividers using various approaches such as horizontal lines, background images, or pseudo-elements. Below are the approaches to create a text divider wi

How to create a canvas triangle using Fabric.js ?

In this article, we are going to create a canvas triangle using FabricJS. The canvas triangle means the triangle is movable and can be stretched according to requirement. Further, the triangle can be customized when it comes to initial stroke color, height, width, fill color, or stroke width. To mak

How to create empty circle with CSS ?

Creating an empty circle with CSS means styling an HTML element (like a div) to appear as a circular shape. This is done by setting equal width and height, adding a border, and applying border-radius: 50% to form the circle. Creating an Empty Circle By Using border-radius Propertythe border-radius p

Area of Triangle with 3 Sides

Area of Triangle when measures of its three sides are given is found using Heron's formula. The area of any two-dimensional shape is the measure of a regionâ€™s size on a surface. A triangle is a closed polygon having three sides and three vertices. Area of a triangle can be found using different meth

How to Create a Ribbon using CSS?

In this article, we will learn how to create a ribbon using CSS. PrerequisitesHTMLCSSApproachThe structure consists of a <button> element with the class "btn" containing the text "GFG DSA Course". Inside the button, there is an <span> element with the class "ribbon" containing the text "

How to Create a List Group with Badges using CSS ?

A List Group with Badges is a UI pattern that combines a list of items with additional visual indicators (badges) to convey extra information. Badges allow you to visually highlight or categorize items within a list. This is especially beneficial when you want to draw attention to specific elements

How to create a 3D Flip Box with CSS ?

A 3D Flip Box is a visual effect where a container flips along the X or Y-axis to reveal another side, often used for interactive elements like cards. You can create it using CSS by applying transform, perspective, and transition properties for smooth flipping animations. ApproachCreate an HTML docu