How To Make Triangles Using CSS


This time we’ll make some triangles and
here’s how we will make them imagine this as our element with no height and width. Then we set its border bottom which make it look like nothing. And then if we add left or
right border any of them we get two triangles now it’s our choice to keep
one and remove the other by setting the border-color to transparent. How did it
work? Well.. that’s topic for another video if
it’s live we’ll add it up here. Next let’s create some triangles we will
create an isosceles triangle at first which looks like this. If you want to try
it on your own then pause the video go ahead. And if you’re successful do let us
know in the comments that you did it. Let’s go ahead now for creating
triangles will use span as our element You can also use the div but you’ll have to
force to display as inline or inline-block to make it work or do some other tweaks. Moving to CSS first we’ll create border-bottom of 100 pixels then we’ll
add a transparent right bottle of 50 pixels and then we get a right angle
triangle. Then we’ll add left transparent border of 50 pixels and here we have a
isosceles triangle. If you want triangle to be upside down you can switch from
border-bottom to border-top and you can also create all other type of triangles
by mismatching these borders or if you’re lazy like me by transforming them.
We hope you like this video our blog is up now so we’ll be posting content on it
as well so don’t forget to check it out link is in the description box below and
don’t forget to subscribe and we’ll see you guys next time

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *