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 — Heretic Monkey
– Heretic Monkey, Commented Nov 7, 2016 at 14:56
→ is → &rightarrow; &RightArrow; &srarr; &ShortRightArrow; See dev.w3.org/html5/html-author/charref — j08691
– j08691, Commented Nov 7, 2016 at 14:57

James Donnelly · Accepted Answer · 2016-11-07 14:58:12Z

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 7, 2016 at 14:58

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ionut Necula Over a year ago

I think that if he wants to look exactly like in his design this won't help.

James Donnelly Over a year ago

@Ionut that'd involve a simple case of finding a font which looks similar enough and applying it specifically to that pseudo-element.

Ionut Necula Over a year ago

Agreed, or using the image from his design would be a much simpler approach.

georgia Over a year ago

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 :)

frnt · Accepted Answer · 2016-11-07 15:19:58Z

2

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>

answered Nov 7, 2016 at 15:19

frnt

8,9232 gold badges27 silver badges28 bronze badges

4 Comments

georgia Over a year ago

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 :-(

frnt Over a year ago

@georgia font-color for what, can you add your jsfiddle.

frnt Over a year ago

@georgia check this fiddle jsfiddle.net/1uby18rw/1, hope solve your issue.

georgia Over a year ago

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.

Arthur Shlain · Accepted Answer · 2019-06-13 17:07:24Z

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

Collectives™ on Stack Overflow

create an arrow using css

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related