Can I make a triangle out of a square or rectangle using div?

Question

I made a rectangle using div,I want to make it a triangle,is it possible?

Answer 1

It's really sort of a hack. If you observe the example:

.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}

This looks like an arrow pointing upwards. The size of the div itself is zero. But there is a black border at the bottom. And two transparent borders on both sides.
But we can't really draw such borders around something that has 0 width and height, can we? Well, the browser just surrounds the "nothing" with lines, and the cross-over of the transparent and black border, actually represent the slanted side of the triangle.

This kind of trick is not really the intended usage of CSS attributes, but it can be fun to draw different shapes from abstract containers such as DIV. :)

Answer 2

https://css-tricks.com/snippets/css/css-triangle/

Answer 3

Thank you a lot 😊

Answer 4

I haven't yet reached the border-left and right of CSS
but can you explain it in simple terms for me?