Want to create arrow with CSS

Question

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 What i do for next image. My Question is totally different where i am creating triangle where triangle is not moving after 90 degree.

Answer 1

You can do this by

1. Create arrow

2. rotate the arrow by transform css rule

.arrow-right {
  width: 0;
  height: 0;
  border-top: 120px solid transparent;
  border-bottom: 120px solid transparent;
  -ms-transform: rotate(-59deg); /* IE 9 */
  -webkit-transform: rotate(-59deg); /* Chrome, Safari, Opera */
  transform: rotate(-59deg);
  border-left: 69px solid green;
  margin-left: 170px;
}

<div class="arrow-right"></div>

Answer 2

I think the easyers way to create that shape would be with SVG.

Creating a path with svg is not hard.

Just place cordinats in a path p=m 10 10 100 0 40 100 Z Where m starts the path and z closes it.

.test {
  width: 250px;
  height: 250px;
  //border: 1px solid black;
}

<svg class="test" viewbox="0 0 150 150">
  <path d="m 10 10 100 0 40 100 Z" stroke="black"/>
</svg>

Answer 3

or cover your arrow with another "white" one with :after like this:

.arrow-down:before {
    content:' ';
    display:inline-block;
    position:absolute;
    top:-300px;
    right:0;
    width: 0; 
    height: 0; 
    border-left: 100px solid transparent;
    border-top: 300px solid white; 
}

FIDDLE