Created: July 22nd 2019
Last updated: May 1st 2020
Categories: IT Development
Author: Marcus Fleuti

How to develop triangle with borders in css

Tags: CSS

Donate with

82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC

We can create triangle with borders with few line in css.
Firstly, we have to create html element, after that we can style that element with the following code:

ex. (arrow-left) element_selector:after{
 content: '';
 display: block;
 position: absolute;
 width: 0;
 height: 0;
 border-top: 10px solid transparent;
 border-bottom: 10px solid transparent;
 border-right: 10px solid blue;
}

As we can see in code, we can create triangle with three borders.
Two borders have transparent color, but one border has blue (Color which we want for triangle).
If we want arrow left, opposite border has the color (border-right) and the rest of borders have transparent.
If we want arrow right , opposite border has the color (border-left) and the rest of borders have transparent, etc.