试图实现向上箭头

时间:2014-08-19 22:33:40

标签: javascript css html5 css3 sass

我正在努力实现向上的箭头.. 我想在我的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 个答案:

答案 0 :(得分:0)

我认为你在寻找的东西在这里有所描述,对我有用,看起来比你发生的要简单得多。

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;

}

相关问题