DEV Community

Cover image for Making a triangle using CSS

Making a triangle using CSS

bmeet profile image B-Meet ใƒป1 min read

Hey there! Today I am going to share my way of making a triangle using CSS and a bit of HTML.
By the way I am also a beginner I just an idea and thought to share it here with you guys, So lets start:

STEP-1: First of all you need to make a div element using html.
STEP-2: Assign it a class

code for above steps

STEP-3: Set the height and width of the div to zero pixels.
STEP-4: Give it a border-left,border-right,border-bottom of 200px[it depends on how much big triangle you want] width,solid and choose the color.
STEP-5: Change the color of left and right borders to transparent.

code for above steps

STEP-6: Your triangle is ready!!๐Ÿ˜ƒ๐Ÿ˜ƒ

final preview

Thats my way to make a triangle, Hope you like it, you got a easy way to make a triangle using CSS.
You can suggest everyone if you have any new and easy way to make a triangle๐Ÿ˜‰.

Discussion (4)

Editor guide
alvaromontoro profile image
Alvaro Montoro

clip-path or background-image are better ways of drawing a triangle in CSS now. They are simpler, more flexible, and allow for more customization.

For example:

bmeet profile image
B-Meet Author

thanks to let me know about๐Ÿ˜Š. Before i wasn't knowing about clip-path property as is wasn't introduced in the course, but its there in w3schools and now i am on it to gain all the deep know about css and html from it๐Ÿ˜Š๐Ÿ˜Š

sznroe profile image
bmeet profile image
B-Meet Author

thank you๐Ÿ˜„