CODEWITHSUNDEEP
javascripthtmlcsssass
user3953390
user3953390

Reputation:

trying to achieve arrow pointing upwards

I am trying to create an arrow pointing upwards. I am trying to to do this in purely css.

I am not able to reproduce in my fiddle as it uses scss. But thought It may help and provide more information. http://jsfiddle.net/311s1whu/4/

I have currently created trapezium shape, which is not quite what I would like. https://docs.google.com/file/d/0B3IBJKENGE7RRFR1WHZDYTF6LTQ/edit

This is the scss that I have tried: 

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

Upvotes: 0

Views: 97

Answers (1)

Doug
Doug

Reputation: 1890

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;

}

Upvotes: 1

Related Questions