Triangle with CSS
Created:
How to create a triangle with CSS
We can create a triangle by using thick borders. All we need is one div.
|
|
Let’s create a square. Normally, when we add borders to an element, we only use 1px or 2px. What if we add thicker borders like 20px? Here is a CSS
|
|
I use different colours for each side of a border, so you can see where one edge ends and the next begins. Below is what we got.
What happens if we set the height and width of the square to 0?
All the borders come together and join in the middle. Now you can see that each border forms a triangle. The size of an arrow is determined by the width of a border. In this example I used 20px.
For example, if you want a down arrow, you can use a top border and use transparent
as a colour for
the rest. The same principle applies to other arrows.
|
|
Back to blog