CSS Triangle Generator | CSS Arrow
Online CSS triangle generator tools. CSS triangles are a creative way to add geometric shapes to your web designs without using images. You can make different triangles just by changing the borders using CSS.
This tool helps you make different kinds of triangles. When you adjust the width of the triangle, the tool will give you the HTML and CSS code for it.
How to Create CSS Triangle
Select Triangle Direction: Choose the direction the triangle is pointing (upward, downward, left, right).
Choose Triangle Color: Decide on the color of your triangle.
Select Triangle Type: (Equilateral, Isosceles, Scalene)
Adjust Triangle Size: Set the desired size for the triangle.
Scroll Down to See the Code: Copy the provided code and paste it into your project.
Generated code
.triangle{
width: 0;
height: 0;
border-width: 0 100px 100px 100px;
border-color: transparent transparent #FF0000 transparent;
border-style: solid;
display: inline-block;
}Click the buttons below to preview the generated code or edit it in real time.
Types of CSS Triangle Shapes
We can make different types of triangles with CSS, but they usually fit into these main groups.
- Basic Directional Triangles (up, down, left, right)
- Isosceles Triangles: These have two equal sides and two equal angles.
- Right-angled Triangles: These have one 90-degree angle.
- Equilateral Triangles: All sides and angles are equal.
- Scalene Triangles: All sides have different lengths.
Usage of CSS Triangles
Triangles can be used to create arrow indicators for sliders, carousels, and navigation menus. Used in dropdown menus and collapsible content to indicate expandable sections.
Navigation elements (dropdown indicators, breadcrumbs)
UI components (tooltips, speech bubbles)
Visual indicators (arrows, sorting indicators)
Expandable/collapsible section indicators
Examples
This section provides a broader context for why and when to use CSS triangles, highlighting their versatility and advantages in modern web design.
Box With CSS Triangle Arrow
Create online speech bubble
How can we make a triangle in different ways?
There are multiple ways to create triangles in CSS
Border Property
Clip-Path Property
SVG
Unicode Characters
Linear Gradient
Using the Border Property
Using Border Property. The most common method involves the 'border' property. By manipulating the element's 'borders' with zero width and zero height
.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 50px solid red;
}Using the Clip-Path Property
The 'clip-path' property allows for more complex shapes, including triangles.
.triangle-clip {
width: 100px;
height: 100px;
background: blue;
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}SVG (Scalable Vector Graphics)
The 'clip-path' property allows for more complex shapes, including triangles.
<svg width="100" height="100">
<polygon points="50,0 0,100 100,100" style="fill:blue;" />
</svg>Unicode Characters
You can use HTML Unicode characters to display triangles directly in your HTML.
<div class="triangle">▲ Up-Pointing Triangle</div>
<div class="triangle">▼ Down-Pointing Triangle</div>
<div class="triangle">◀ Left-Pointing Triangle</div>
<div class="triangle">▶ Right-Pointing Triangle</div>you can find more Unicode triangles
Using Linear Gradient
Using the 'linear-gradient' property in CSS to create triangles.
.triangle-gradient {
width: 100px;
height: 100px;
/* left top */
background-image: linear-gradient(to bottom right, #8400ff 50%, transparent 0);
/*
right top
background-image: linear-gradient(to left bottom, #8400ff 50%, transparent 0); */
/* bottom left
background-image: linear-gradient(to right top, #8400ff 50%, transparent 0); */
/* bottom right
background-image: linear-gradient(to left top, #8400ff 50%, transparent 0); */
background-repeat: no-repeat;
}Basic Triangle Styles and Code Snippets
A basic CSS triangle can be made using the border property. Here is an example: in this CSS code, you don't need to adjust the border style width; you only need to modify the --size variable.
Up Triangle Arrow
The example code shows how to make a triangle that faces upwards.
.triangle-up {
--size: 100px;
width: 0;
height: 0;
/* border-width: 0 50px 86.6px 50px; */
border-width: 0 calc(var(--size)/2) calc((sqrt(3)/2) * var(--size)) calc(var(--size)/2);
border-color: transparent transparent #FF0000 transparent;
border-style: solid;
}Right Triangle Arrow
The example code shows how to make a triangle that faces to the right.
.triangle-right {
--size: 100px;
width: 0;
height: 0;
/* border-width: 50px 0 50px 86.6px; */
border-width: calc(var(--size)/2) 0 calc(var(--size)/2) calc((sqrt(3)/2) * var(--size));
border-color: transparent transparent transparent #FF0000;
border-style: solid;
}Down side Triangle Arrow
The example code shows how to make a triangle that faces downwards.
.triangle-down {
--size: 100px;
width: 0;
height: 0;
/* border-width: 86.6px 50px 0 50px; */
border-width: calc((sqrt(3)/2) * var(--size)) calc(var(--size)/2) 0 calc(var(--size)/2);
border-color: #FF0000 transparent transparent transparent;
border-style: solid;
}Left Side Triangle Arrow
The example code shows how to make a triangle that faces to the left.
.triangle-left {
--size: 100px;
width: 0;
height: 0;
/* border-width: 50px 86.6px 50px 0; */
border-width: calc(var(--size)/2) calc((sqrt(3)/2) * var(--size)) calc(var(--size)/2) 0;
border-color: transparent #FF0000 transparent transparent;
border-style: solid;
}Top Left Triangle Arrow
The example code shows how to make a triangle that faces the Upper Left corner.
.triangle-top-left {
--size: 100px;
width: 0;
height: 0;
/* border-width: 100px 100px 0 0; */
border-width: var(--size) var(--size) 0 0;
border-color: #FF0000 transparent transparent transparent;
border-style: solid;
}Top Right Triangle Arrow
The example code shows how to make a triangle that faces the Upper Right corner.
.triangle-top-right {
--size: 100px;
width: 0;
height: 0;
/* border-width: 0 100px 100px 0; */
border-width: 0 var(--size) var(--size) 0;
border-color: transparent #FF0000 transparent transparent;
border-style: solid;
}Bottom Left Triangle Arrow
The code sample demonstrates how to create a triangle that points to the bottom left side.
.triangle-bottom-left {
--size: 100px;
width: 0;
height: 0;
/* border-width: 100px 0 0 100px; */
border-width: var(--size) 0 0 var(--size);
border-color: transparent transparent transparent #FF0000;
border-style: solid;
}Bottom Right Triangle Arrow
The code sample demonstrates how to create a triangle that points to the bottom right side.
.triangle-bottom-right {
--size: 100px;
width: 0;
height: 0;
/* border-width: 0 0 100px 100px; */
border-width: 0 0 var(--size) var(--size);
border-color: transparent transparent #FF0000 transparent;
border-style: solid;
}