Donate with
Categories
Donate with
82uymVXLkvVbB4c4JpTd1tYm1yj1cKPKR2wqmw3XF8YXKTmY7JrTriP4pVwp2EJYBnCFdXhLq4zfFA6ic7VAWCFX5wfQbCC
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.