javascript - 试图实现向上的箭头

Question

我正在尝试创建一个向上的箭头。我试图用纯 CSS 来做到这一点。

我无法在我的 fiddle 中重现，因为它使用 scss。但认为它可能会有所帮助并提供更多信息。 http://jsfiddle.net/311s1whu/4/

我目前创建的是梯形，这不是我想要的。 https://docs.google.com/file/d/0B3IBJKENGE7RRFR1WHZDYTF6LTQ/edit

这是我试过的scss:

     .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

我认为您正在寻找的内容已在此处描述，对我有用并且看起来比您正在进行的要简单得多。

http://css-tricks.com/snippets/css/css-triangle/

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

border-bottom: 5px solid black;