create an arrow using css

Question

Is there any way to create an arrow like that in the following button, using CSS?

I know how to create triangle-like arrows like this

#triangle_arrow {
        top: 3pt;
        content: "";
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        border-right: 0.1em solid black;
        border-top: 0.1em solid black;
        transform: rotate(45deg);
    }

but that line towards the arrow's corner is confusing me!

Just use one of the many, many, [Unicode arrow symbols available](http://unicode-table.com/en/sets/arrows-symbols/) — Heretic Monkey, Nov 07 '16 at 14:56
**→** is → &rightarrow; &RightArrow; &srarr; &ShortRightArrow; See https://dev.w3.org/html5/html-author/charref — j08691, Nov 07 '16 at 14:57

score 5 · Answer 1 · answered Nov 07 '16 at 14:58

5

Fortunately for you, the → HTML entity exists, meaning you don't need to faff around with CSS triangles and instead can simply use content within a pseudo-element:

button {
  background: #0898b8;
  border: 1px solid #0898b8;
  color: white;
  line-height: 24px;
  padding: 6px 12px;
}

span::after {
  content: '→';
  font-size: 18px;
  margin-left: 4px;
}

<button>
  <span>Next</span>
</button>

answered Nov 07 '16 at 14:58

James Donnelly

126,410
34
208
218

I think that if he wants to look exactly like in his design this won't help. – Ionut Necula Nov 07 '16 at 15:01
@Ionut that'd involve a simple case of finding a font which looks similar enough and applying it specifically to that pseudo-element. – James Donnelly Nov 07 '16 at 15:02
Agreed, or using the image from his design would be a much simpler approach. – Ionut Necula Nov 07 '16 at 15:03
yeah as @lonut said, I was thinking about a way to make it look exactly like that, in both size and style. I guess I will use the image or change font style. Thank you for the answers anyway :) – georgia Nov 07 '16 at 15:07

score 2 · Accepted Answer · answered Nov 07 '16 at 15:19

Already there is way through which you could achieve this i.e. suggested by James, but you could even do this using pseudo selectors or using pre-defined icons using font awesome to get an arrow icon next to some tag, as below.

Solution 1:

#box{
  width:100px;
  height:50px;
  background:blue;
  position:relative;
}    
#box:before{
        top: 20px;
        right:10px;
        content: "";
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        border-right: 0.1em solid white;
        border-top: 0.1em solid white;
        transform: rotate(45deg);
        position:absolute;
}
#box > p:after{
  content:'';
  width:20px;
  height:1px;
  background:white;
  right:10px;
  top:24px;
  position:absolute;
}
#box > p{
  font-size:24px;
  color:#fff;
  padding:10px;
  box-sizing:border-box;
}

<div id="box">
<p>Next</p>
</div>

Solution 2 :

#box{
  width:100px;
  height:50px;
  background:blue;
  position:relative;
}    
#box > p{
  font-size:24px;
  color:#fff;
  padding:10px;
  box-sizing:border-box;
}
#box > p > .fa{
  color:#fff;
  font-size:16px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="box">
<p>Next <i class="fa fa-arrow-right"></i></p>
</div>

one more quick question. Is there any way to change the font color in case of mouse hover? I tried both #box:hover and #box p:hover selectors but the arrow refuses to change its color :-( — georgia, Nov 08 '16 at 11:13
@georgia check this fiddle https://jsfiddle.net/1uby18rw/1/, hope solve your issue. — frnt, Nov 08 '16 at 11:27
thank you so much once again @frnt. I'm sorry I didn't see your message in time to send you my fiddle. The problem was that I used border-color for both before and after pseudoelements. Sorry for bothering for that silly mistake. — georgia, Nov 08 '16 at 11:46

score 1 · Answer 3 · answered Jun 13 '19 at 17:07

Resizeable CSS-only arrow. https://codepen.io/ArtZ91/pen/jjbOvG

<div class="css-arrow top" style="width: 15px; height: 30px; zoom: 2;"></div>

.css-arrow {
  position: relative;
  zoom: 1;
  &:before {
      box-sizing: border-box;
      content: "";
      display: block;
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
      top: 1px;
      bottom: 0;
      width: 1px;
      background: #000;
      zoom: 2;
  }
  &:after {
    box-sizing: content-box;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 57%;
    height: 0;
    padding-bottom: 57%;
    border: 1px solid #000;
    border-width: 1px 0 0 1px;
    transform: translate(0, 0) rotate(45deg);
    transform-origin: 0% 0%;
    border-radius: 0;
    zoom: 2;
  }
  &.right {
    transform: rotate(90deg);
  }
  &.bottom {
    transform: rotate(180deg);
  }
  &.left {
    transform: rotate(270deg);
  }
}

create an arrow using css

3 Answers3

Linked