Are you looking to add some sparkle to your website design? One way to achieve this is by incorporating unique shapes, such as triangles. In this article, we will guide you through the process of creating a triangle shape using CSS.

Creating initial markup

To begin, let’s start with a basic HTML structure:

<div class="triangle triangle-down"></div>

The first class triangle controls the base style for the shape. The second class triangle-down controls the direction of the triangle.

Next, we will apply CSS styles to transform this div into a triangle. Here’s the CSS code:

/* Triangle Base styles */
.triangle {
  width: 0;
  height: 0;
  border: 5px solid transparent;
}

/* Triangle direction */
.triangle-up {
    border-bottom-color: #000;
    border-top-width: 0;
}

.triangle-down {
    border-top-color: #000;
    border-bottom-width: 0;
}

.triangle-left {
    border-right-color: #000;
    border-left-width: 0;
}

.triangle-right {
    border-left-color: #000;
    border-right-width: 0;
}

Let’s break down the CSS code:

• width: 0; and height: 0; set the dimensions of the triangle to zero.
• border: 5px solid transparent; create the sides of the triangle, each with a width of 5px.
• border-bottom-color: #000; defines the base of the triangle with a height of 5px and a black color.
• border-{side}-width: 0; removes the additional transparent space created by opposite border. This is quite important when you want to center align the triangle with some text using vertical-align: middle or using flexbox property align-items: center.

Once you have applied these CSS styles, you will see a triangle shape rendered on your webpage.

Customizing triangle size and color

Customize size

Let’s see how to customize the size of the triangle. The size of the triangle is mainly controlled by the width of the border. So, we can increase or decrease the size by adjusting the border width in the base class or creating an additional class to control the size.

<div class="triangle triangle-down-big"></div>

/* Changing the size */
.triangle-down-big {
    border-width: 30px;
    border-bottom-width: 0; // For direction up
}

Let’s break down the CSS code above.

• border-width: 30px; here controls the triangle size.
• border-bottom-width: 0; just removes the extra space as discussed above

Customize color

As you might have guessed, to customize the triangle color, we just need to change the color of the border.

<div class="triangle triangle-down-blue"></div>

.triangle-down-blue {
    border-top-color: #0ea5e9;
    border-bottom-width:  0;
}

Adding hover effect

We can even add hover effect to the CSS triangle by just adding :hover pseudo class.

HTML Code:

<div class="triangle triangle-hover-effect"></div>

CSS Code:

/* Adding hover effect */
.triangle-hover-effect {
    border-top-color: #0ea5e9;
    border-bottom-width:  0;
    transition: border-color .3s ease;
}

.triangle-hover-effect:hover {
    border-top-color: #0369a1;
}

Let’s understand the CSS code.

• transition: border-color .3s ease; adds a smooth transition while changing the triangle color
• border-top-color: #0369a1; – provides a slightly darker shade of the same color on hover

Demo – CSS triangle

Summary

In this article, we learned the basics of creating CSS triangle and customizing its style attributes like size, color and adding a hover effect with transition.

There are various use cases for triangle shapes in web design. You can use them as decorative elements, arrows, or even as part of a logo. Let your creativity run wild!