Arrow through the css

Question

Good guys, I’m starting with the Ionic and while trying to reproduce some screens I came across an arrow, that’s right, an arrow, follow the image:

What I got so far:

And code:

<ion-content>

  <div id="container">

    <ion-item lines="full" class="ion-no-padding">
      <ion-input placeholder="MY NAME IS"></ion-input>
    </ion-item>

    <ion-item mode="ios" lines="none" class="ion-no-padding" id="x">
      <ion-input id="item-custom" placeholder="GET ACCESS" [type]="showPassword ? 'text' : 'password'"></ion-input>
    </ion-item>

  </div>

</ion-content>

The question is how to reproduce this arrow, what would be the best solution ? I thought about using the ion-icon but I can only increase it as a whole using

font-size: ;

and not a single dimension, correct ?

Answer 1

Here’s a suggestion just with CSS, it can help you, but basically it’s a simple element with a pseudo-element which is a square with only 2 bordas and spun 45deg

You can adjust the value in px to stay the size you think is right...

seta {
  display: block;
  position: relative;
  height: 1px;
  width: 100px;
  background-color: orangered;
  margin: 20px 10px;
}
seta::after {
  content: '';
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border: 0 solid orangered;
  border-top-width: 1px;
  border-right-width: 1px;
  position: absolute;
  top: -5px;
  right: 2px;
  transform: rotate(45deg);
}

<seta></seta>

Answer 2

.arrow { background: #000; height: 1px; width: 180px; margin: 0 auto; position: relative; cursor: pointer;}
.arrow:before, .arrow:after { content: ""; background: #000; position: absolute;
  height: 1px; width: 15px;
}
.arrow:before { right: -5px; bottom: -5px; transform: rotate(-45deg); }
.arrow:after { right: -5px; top: -5px; transform: rotate(45deg);}

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