How can I make a triangle in HTML

Question

I only know how to draw shapes like square, rectangle, circle or oval.
But how can I make a shape like triangle, pentagon, hexagon etc.

Answer 1

https://code.sololearn.com/W0c9qJ8yh0lB/?ref=app

Answer 2

To make a Triangle see this code -
.triangle{
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-bottom: 50px solid #555;
}
It is made from border.

To make more shapes refer this-1. https://www.w3schools.com/howto/howto_css_shapes.asp
2. https://css-tricks.com/the-shapes-of-css/

Answer 3

https://code.sololearn.com/W8L0zbGK0jD7/?ref=app

Answer 4

Pentagon -
#pentagon {
position: relative;
width: 54px;
box-sizing: content-box;
border-width: 50px 18px 0;
border-style: solid;
border-color: red transparent;
}
#pentagon:before {
content: "";
position: absolute;
height: 0;
width: 0;
top: -85px;
left: -18px;
border-width: 0 45px 35px;
border-style: solid;
border-color: transparent transparent red;
}

Hexagon -
#hexagon {
width: 100px;
height: 57.735px;
background: red;
position: relative;
}
#hexagon::before {
content: "";
position: absolute;
top: -28.8675px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 28.8675px solid red;
}
#hexagon::after {
content: "";
position: absolute;
bottom: -28.8675px;
left: 0;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 28.8675px solid red;
}

See this site for pure CSS shapes - https://css-tricks.com/the-shapes-of-css/

Answer 5

Calviղ Please tell me can we make pentagon and hexagon by pure CSS

Answer 6

You can apply some css on the border of your html element like a div