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.
6 Antworten
+ 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/
+ 1
https://code.sololearn.com/W8L0zbGK0jD7/?ref=app
+ 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/
0
Calviղ Please tell me can we make pentagon and hexagon by pure CSS
0
You can apply some css on the border of your html element like a div