New Check out the curated list of the finest design resources I've gathered for you! Take a look →

How to Create CSS Triangles Easily

Creating CSS triangles is a common UI task, especially when you need to visually connect two elements. There are several ways to achieve this, but in this article, we will focus on the most popular methods using borders, clip-path, rotate transform, and HTML entities.

Methods to Create CSS Triangles

1. Using Borders

Create CSS Triangles Using Borders
<div class="wrapper">
    <div class="triangle-container"></div>
</div>

<style>
        .triangle-container {
            position: relative;
            width: 200px;
            height: 200px;
            background: red;
        }

        .triangle-container::after,
        .triangle-container::before{
            content: "";
            width: 0;
            height: 0;
            border-style: solid;
            position: absolute;
        }

        .triangle-container::after {
            border-width: 100px 100px 0 100px;
            border-color: #007bff transparent transparent transparent;
            left: 0;
            top: 100%; 
        }

        .triangle-container::before {
            border-width: 0 100px 100px 100px;
            border-color: transparent transparent #007bff transparent;
            right: 0;
            bottom: 100%;
        }
</style>
  • Create a separate element or pseudo-element ::before/::after.
  • Color the border of the desired direction (e.g., border-bottom for a top arrow).
  • Set the width and height of the arrow according to the border sizes.
  • Position the arrow as needed.

2. Using Clip-path

<div class="wrapper">
    <div class="triangle-container"></div>
</div>

<style>
        .triangle-container {
            position: relative;
            width: 200px;
            height: 200px;
            background: red;   
        }

        .triangle-container::before {
            content: '';
            position: absolute;
            top: 100%;
            left: 0;
            width: 200px;
            height: 200px;
            background: blue;
            clip-path: polygon(50% 100%, 100% 0, 0% 0%);
        }
</style>
  • Use the polygon() function to mask the element into a triangle shape.
  • Set the points of the triangle relative to the edges of the container.
  • Define the width, height, and background color.

4. Using HTML Entities

▲ : &#9650;
► : &#9658;
▼ : &#9660;
◄ : &#9668; 
  • Add an HTML entity to the ::before or ::after pseudo-element’s content property.

Creating CSS triangles can be done in various ways, depending on the specific requirements of your project. By using borders, clip-path, rotate transform, or HTML entities, you can easily achieve the desired outcome of visually connecting elements on your website.

Rizwan Aritonang

An independent WordPress & Front-End Developer from Bandung, Indonesia.

Get In Touch

Leave a Comment