試圖實現向上箭頭

[英]trying to achieve arrow pointing upwards


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 个解决方案

#1


0  

I think what you are looking for is described here, works for me and looks much simpler than what you have going on.

我認為你在尋找的東西在這里描述,對我有用,看起來比你發生的要簡單得多。

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;

}


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2014/08/19/7250e01bfeaa02fb5d8ab48d0dfac05c.html



 
粤ICP备14056181号  © 2014-2020 ITdaan.com