How to Code an Arrow Using CSS

How to code an arrow using css

For arrow and lines i have use border

.content {  margin-top: 30px;  position: relative;  border: 2px solid black;  border-bottom: 2px;  border-radius: 5px;  width: 200px;  height: 40px;}
.content:before,.content:after,.center:before {  content: '';  width: 0;  height: 0;  border-width: 8px 8px;  border-color: #000 transparent transparent transparent;  border-style: solid;  position: absolute;}
.content:before {  left: -8px;  top: 36px;}
.content:after {  right: -8px;  top: 36px;}
.center:before {  right: -8px;  top: 60px;}
.center {  position: absolute;  height: 60px;  top: -24px;  left: 50%;  margin-left:-2px;  border: 1px solid black;}

<div class="content">  <div class="center">  </div></div>

create an arrow using css

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>

How to Make A Chevron Arrow Using CSS?

You can use the before or after pseudo-element and apply some CSS to it. There are various ways. You can add both before and after, and rotate and position each of them to form one of the bars. An easier solution is adding two borders to just the before element and rotate it using transform: rotate.

Scroll down for a different solution that uses an actual element instead of the pseuso elements

In this case, I've added the arrows as bullets in a list and used em sizes to make them size properly with the font of the list.

ul {    list-style: none;}
ul.big {    list-style: none;    font-size: 300%}
li::before {    position: relative;    /* top: 3pt; Uncomment this to lower the icons as requested in comments*/    content: "";    display: inline-block;    /* By using an em scale, the arrows will size with the font */    width: 0.4em;    height: 0.4em;    border-right: 0.2em solid black;    border-top: 0.2em solid black;    transform: rotate(45deg);    margin-right: 0.5em;}
/* Change color */li:hover {  color: red; /* For the text */}li:hover::before {  border-color: red; /* For the arrow (which is a border) */}

<ul>    <li>Item1</li>    <li>Item2</li>    <li>Item3</li>    <li>Item4</li></ul>
<ul class="big">    <li>Item1</li>    <li>Item2</li>    <li>Item3</li>    <li>Item4</li></ul>

Is it possible to make these arrows with html and css?

[Edit] After looking at your image again, I failed to account for the first element being flat. I have updated my answer.

Using before,after, and nth-child selectors, you can achieve what you showed in your image. The before and after pseudo elements are used to create the top and bottom half of the arrows while the nth-child selectors are used to make the arrows appear to be progressively closer together.

.steps-list {  display: flex;  list-style: none;}
.steps-list .step-item {  position: relative;  display: flex;  align-items:center;  text-align: center;  width: 25%;}
.steps-list .step-item .step-link {  font-weight: bold;  width: 100%;  display: inline-block;  padding:10px 5px;  box-sizing:border-box;}
.step-link::before {  content: "";  display: block;  position: absolute;  transform: skew(-40deg, 0);  background: #e2e3e4;  height: 50%;  bottom: 0;  z-index: -1;  left:5px;}.step-link::after {  content: "";  display: block;  position: absolute;  transform: skew(40deg, 0);  background: #e2e3e4;  height: 50%;  top: 0;  z-index: -1;  left:5px;}.step-item:nth-child(1){  overflow:hidden;}.step-item:nth-child(1) .step-link::after {  width:95%;  left:-15px;}
.step-item:nth-child(1) .step-link::before {  width: 95%;  left:-15px;}
.step-item:nth-child(2) .step-link::after {  width: 90%;}
.step-item:nth-child(2) .step-link::before {  width: 90%;}
.step-item:nth-child(3) .step-link::after {  width: 95%;}
.step-item:nth-child(3) .step-link::before {  width: 95%;}
.step-item:nth-child(4) .step-link::after {  width: 100%;}
.step-item:nth-child(4) .step-link::before {  width: 100%;}

<ul class="steps-list">  <li class="step-item">    <a href="#" class="step-link">Contact us</a>  </li>  <li class="step-item">    <a href="#" class="step-link">Consult with RCIC</a>  </li>  <li class="step-item">    <a href="#" class="step-link">Apply via your pathway</a>  </li>  <li class="step-item">    <a href="#" class="step-link">Settle in Canada</a>  </li></ul>

How to create the UP Arrow using only HTML and CSS?

You can try this for Up arrow. More click Here

  .arrow-up {    width: 0;     height: 0;     border-left: 15px solid transparent;    border-right: 15px solid transparent;
    border-bottom: 15px solid blue;  }

<div class="arrow-up"></div>

CSS arrow with background

Here is an exemple.

Change text-indent and left to match your requirement.

a {
  text-decoration: none;
}
.fa-long-arrow-right:before {
  content: "\2192";
  font-size: 43px;
  font-weight: 100;
  position: relative;
  top: 7px;
  border: 1px solid #f1eeea;
  background: #f1eeea;
  border-radius: 50%;
  left: -19px;
  z-index: -1;
  text-indent: 20px;
  display: inline-block;
  height: 70px;
  width: 70px;
  line-height: 70px;
}

<a href="/dining.html" target="_blank" class="home-button">
  Find out more
  <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
</a>

How to rotate arrow icon in left side? Without rotate all icon ? Only css

You need to add the rotation in the :active class too:

  &:active {
    transform: translateX(-50%) translateY(-50%) scale(0.9) rotate(180deg);
  }

So the rotation keeps taking effect.

Example: CodePen

How to Code an Arrow Using CSS