how to change triangle to up arrow using pure css

Question

Here is fiddle example: example

Question1: I have a flowing arrow triangle css:

.wrapper {
    background-color: black;
    width: 100px;
    height: 100px;
}

.downArror {
    float: left;
    display: inline-block;
    border: 15px solid rgba(0, 0, 0, 0);
    border-bottom-color: #fff;
    margin: 8px;
}

HTML:

<div class="wrapper"><div class="downArror"></div></div>

Just wondering, is there a way to change the css that make this triangle to a '^' shape?

what I'd like to have is something like this:

Question2:

Is there a way to make a tick like this using code?: I am currently using &#8730 but, the shape is slightly different

Answer 1

I actually created this effect awhile back for a menu. You can find it here:

http://codepen.io/spikeyty/pen/IFBro

Basically, I took a transparent div, added bottom-left and bottom-right borders, and then rotated the div 45deg using transform. For extra sweetness the example has a neat hover effect. Enjoy!