CSS how to draw arrow on vertical line

Question

How to add an arrow on the CSS vertical line by using just pure CSS?

My vertical line is just using the CSS border-right only, then I want to add a two-lines arrow on this line to make it like an arrow, like this:

<div  class="ve-line"></div>

.ve-line{
border-right: 1px solid rgb(232, 232, 232);
}

score 2 · Accepted Answer · answered Jun 10 '21 at 07:52

You can create CSS triangle by using border than add another one larger triangle to create border like style and position it absolutly with right: -1px to place it on the line.

.ve-line{
  border-right: 1px solid rgb(232, 232, 232);
  height: 500px;
  position: relative;
}

.triangle {
  position: absolute;
  right: -1px;
  top: 100px;
}

.triangle:before,
.triangle:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
}

.triangle:before {
  border-top: 22px solid transparent;
  border-bottom: 22px solid transparent;
  border-right: 22px solid rgb(232, 232, 232);
}

.triangle:after {
  position: absolute;
  right: 0;
  top: 2px;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid white;
}

<div  class="ve-line">
  <div class="triangle"></div>
</div>

CSS how to draw arrow on vertical line

1 Answers1