CODEWITHSUNDEEP
cssborderpseudo-elementcss-shapes
Laxmana
Laxmana

Reputation: 1706

Two angle line arrows CSS

Is it possible to create two arrows like the photo below with css or I have to use a png or svg?

enter image description here

So far

HTML

a {
  position: relative;
  display: block;
  padding-left: 30px;
  line-height: 45px;
  height: 45px;
}
a:after,
a:before {
  right: 100%;
  top: 26px;
  border-left: 1px solid black;
  content: " ";
  height: 30px;
  width: 25px;
  position: absolute;
  pointer-events: none;
  left: 7px;
}
a:after {
  -webkit-transform: rotate(135deg);
  left: -11px;
}
a:before {
  -webkit-transform: rotate(45deg);
  top: 5px;
}
<a href="#">Next</a>

jsfiddle

I can't figure how to put another pair of borders.

Thanks in advance

Upvotes: 0

Views: 3656

Answers (3)

nice ass
nice ass

Reputation: 16709

With gradients:

a{
  position: relative;
  padding-left: 40px;
}

a::before{
  content: '';    
  position: absolute;
  width: 40px;
  height: 40px;
  left: 0;
  top: 0;     
  background-image:
    linear-gradient(135deg, transparent 0px, transparent 19px, black 20px, transparent 21px),
    linear-gradient(45deg, transparent 0px, transparent 19px, black 20px, transparent 21px),
    linear-gradient(135deg, transparent 0px, transparent 19px, black 20px, transparent 21px),
    linear-gradient(45deg, transparent 0px, transparent 19px, black 20px, transparent 21px);          
  background-repeat: no-repeat;
  background-size: 50% 50%;
  background-position: 0% top, 0% bottom, 50% top, 50% bottom;  
                              /* distance ^        ^ */
}

http://jsfiddle.net/E8sRw/

Upvotes: 1

John
John

Reputation: 3415

With a bit of tinkering of your example, it's possible, but you'd probably be better off using another method to draw it or using an icon or icon font.

Here's the fiddle

Achieved with 

transform: skew();

rather than rotate.

Upvotes: 4

MarioD
MarioD

Reputation: 1703

It's possible, but I would just use a SVG in this case:

http://jsfiddle.net/6v7Np/

HTML

<div class="arrow_box"></div>
<div class="arrow_box alt"></div>

CSS

.arrow_box {
    position: relative;
    background: #fff;
    top:50px;
    left:60px;
}
.arrow_box.alt {
    left:80px;
}
.arrow_box:after, .arrow_box:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
.arrow_box:after {
    border-color: rgba(255, 255, 255, 0);
    border-right-color: #fff;
    border-width: 30px;
    margin-top: -30px;
}
.arrow_box:before {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: #000;
    border-width: 31px;
    margin-top: -31px;
}

Upvotes: 1

Related Questions