试图实现向上箭头-tryingtoachievearrowpointingupwards

I am trying to achieve the arrow pointing upwards.. i am trying to achieve it in my css i am not able to reproduce in my fiddle... right now i see as trapezium .. providing my code below.. can you guys tell me how to fix it.. http://jsfiddle.net/311s1whu/4/

我正在努力实现向上的箭头..我正在尝试在我的css中实现它我无法在我的小提琴中重现...现在我看作是梯形...提供我的代码在下面..你们能告诉吗?我怎么解决它.. http://jsfiddle.net/311s1whu/4/

https://docs.google.com/file/d/0B3IBJKENGE7RRFR1WHZDYTF6LTQ/edit

 .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; }

1 个解决方案

.arrow-up {
width: 0; 
height: 0; 
border-left: 5px solid transparent;
border-right: 5px solid transparent;

border-bottom: 5px solid black;