CODEWITHSUNDEEP
csscss-shapes
georgia
georgia

Reputation: 55

create an arrow using css

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

arrow button

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!

Upvotes: 1

Views: 3340

Answers (3)

Arthur Shlain
Arthur Shlain

Reputation: 1099

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

Upvotes: 1

frnt
frnt

Reputation: 8795

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>

Upvotes: 2

James Donnelly
James Donnelly

Reputation: 128771

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>

Upvotes: 5

Related Questions