how to change triangle to up arrow using pure css - html

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!

Answer 2

It's possible using css : (Hope you meant this)
.wrapper{
background-color:black;
width:20px;
height:20px;
text-align:center;
}
.downArror_black:before{
content:'\2227';
color:#fff;
}
.tick:before{
content:'\2713';
color:#fff;
}
<div class="wrapper">
<div class="downArror_black"></div>
</div>
<br />
<div class="wrapper">
<div class="tick"></div>
</div>