0

How can I make a triangle in HTML

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.

19th Mar 2022, 12:37 PM
Arnav Gumber
Arnav Gumber - avatar
6 Antworten
20th Mar 2022, 3:17 PM
Calviղ
Calviղ - avatar
+ 4
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/
19th Mar 2022, 1:10 PM
Shaurya Kushwaha
+ 1
https://code.sololearn.com/W8L0zbGK0jD7/?ref=app
20th Mar 2022, 2:54 PM
Calviղ
Calviղ - avatar
+ 1
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/
20th Mar 2022, 3:15 PM
Shaurya Kushwaha
0
Calviղ Please tell me can we make pentagon and hexagon by pure CSS
20th Mar 2022, 2:56 PM
Arnav Gumber
Arnav Gumber - avatar
0
You can apply some css on the border of your html element like a div
21st Mar 2022, 9:45 AM
KashishAggarwal
KashishAggarwal - avatar