how to create arrow down/up in css
<p>How can I create a arrow point down /up in css?</p>

<p>I tried to build it from div:</p>

<pre><code>.triangle_down {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid #2f2f2f;
    font-size: 0;
    line-height: 0;
    float: left;
}
</code></pre>

<p>This is the result:<a href="https://i.stack.imgur.com/KO02G.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KO02G.png" alt="enter image description here"></a>.</p>

<p>But i tried to build something like this:<a href="https://i.stack.imgur.com/RZUsh.png" rel="noreferrer"><img src="https://i.stack.imgur.com/RZUsh.png" alt="enter image description here"></a></p>

<p>Any suggestions?</p>