Arrow not showing properly in CSS - html

Question

I am trying to achieve the arrow pointing downwards...
right now its showing as trapezium there is some problem in CSS arrow code...
providing my code below.....
Output
https://docs.google.com/file/d/0B3IBJKENGE7RRFR1WHZDYTF6LTQ/edit
<div class="icon__controls__controls">
<div><i class="zoom-out"></i>
<i class="icon-threesixty"></i>
</div>
</div>
CSS :
.icon__controls__controls {
float: left;
display: block;
margin-right: 2.1276595745%;
width: 36.170212766%;
margin-left: 38.2978723404%;
margin-top: 10px;
margin-bottom: 30px;
text-align: center;
}
.icon__controls__controls:last-child {
margin-right: 0;
}
.icon__controls__controls [class^=icon-] {
font-size: 20px;
font-size: 1.25rem;
display: inline-block;
vertical-align: baseline;
zoom: 1;
*display: inline;
*vertical-align: auto;
color: #666;
margin: 0 5px;
vertical-align: top;
}
.icon__controls__controls .zoom-out {
color: red;
}
.icon__controls__controls:after {
display: none;
content: '';
z-index: 3;
border: 50px solid transparent;
/* border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black; */
}
.icon__controls__controls:after {
border-top-color: #ef6f00;
}
.icon__controls__controls.active:after {
display: block;
}

Answer 1

LIVE DEMO
This as basically all what you need to understand how it works:
STYLE:
.arrow{
width:20px;
height:20px;
position:relative;
}
.arrow:before{
content:'';
position:absolute;
top:0;
left:0;
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-bottom:0px solid transparent;
border-top:20px solid orange;
}
HTML:
<div class=arrow><div>
if you want it to point up just switch topand bottom
border-top:0px solid transparent;
border-bottom:20px solid orange;
Same for leftand right.
I hope this will help you understanding how arrow are created.

Answer 2

Basic sample :
<div class="arrowBorder"></div>
.arrowBorder {
height : 0px;
width : 0px;
border-top: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
http://jsbin.com/qusecu/4/watch?html,css,output
see more - CSS clipping or masking

Answer 3

You should find the below bit more simpler
css
.arrow{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
width:20px;
height:20px;
position:relative;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-bottom:20px solid transparent;
border-top:20px solid orange;
}
html
<div class=arrow><div>