Today i am creating arrow with css. I tried 

```
    .arrow-down {
        width: 0; 
        height: 0; 
        border-left: 400px solid transparent;
        border-right: -100px solid transparent;
        border-top: 300px solid #f00; 
    }
<div class="arrow-down"></div>

```

But every time i get ![enter image description here](https://i.stack.imgur.com/WhWfG.png)
What i do for next image.
My Question is totally different where i am creating triangle where triangle is not moving after 90 degree.
![enter image description here](https://i.stack.imgur.com/r8sXy.png)