How can I draw a Triangle 🔺 ???

Question

I want to draw a triangle ....

And How can I rotate it ?????????😕

Answer 1

To rotate it, in the CSS, add:
animation-name: turn;
animation-duration: 10s;
animation-timing-function: linear;

And then add (not in the elements’s own CSS):
@keyframes turn {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

So, altogether the CSS from KrOW ‘s answer and my answer will look like this:
#triangle {
width: 0px;
height: 0px;
border: 50px solid transparent;
border-top: 0px;
border-bottom-color: red;
animation-name: turn;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes turn {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
And the HTML:
<div id = “triangle”></div>

Answer 2

ill assume your block element(div,p) already has a width,height and positioning
do..
elem{
clip-path:polygon(50% 0%,100% 100%,0% 100%,50% 0%);
}
bam..
your element is a triangle

your can rotate elements using the:
elem{
transform:rotate()
}
syntax

Answer 3

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

Answer 4

With SVG, Canvas and HTML/CSS at example:
// CSS
#triangle{
width:0; height:0;
border:50px solid transparent;
border-top:0;
border-bottom-color:red;
}

// HTML
<div id="triangle"></div>

Answer 5

Hi Hani Ibrahim,

There are lots of ways to draw a triangle. You may benefit from the variety of answers already provided in earlier posts by using the search bar.

Hope this helps! ☺