Html Question posted in
Some basic documentation can be found here.

Html – How can i add arrows like this in the between of the circles in a website

How can i make it look like this

I want to make lines with arrow head in between the circles pointing to another circle on its right.

I’ve added the text inside of the circle and outside the circle but I’m unable to create arrows in between the circle

The best I could do can be seen below, also its not responsive.

.circle{
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: flex-start;
    text-align: center;
}
.arrow-line{
    width: 300px;
    height: 1px; 
    border: 1px #0070BA solid;
    margin-top: 55px;
}
.arrow {
    width: 10px;
    border: solid #0070BA ;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 5px;
    margin-top: 50px;
}
.right {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}
.circletext{
    display: flex;
    padding-top: 10px;
    margin-top: 10px;
    align-items: center;
    flex-direction: column;
    font-size: 25px;
    font-weight: 800;
    line-height: 29px;
    letter-spacing: 0.03em;
    text-align: left;
    color: #595555;
}
.circle-1 {
    background-color:#fff;
    border:2px solid #0070BA;    
    height:69px;
    width: 65px;;
    border-radius:50%;
    color: #0070BA;
    text-align: center;
    font-size: 25px;
    line-height: 60px;
}
<div class="circle">
  <div class="circletext">
    <div class="circle-1">1</div>Planning
  </div>
  <div class="arrow-line"></div>
  <p>
    <i class="arrow right"></i>
  </p>
  <div class="circletext">
    <div class="circle-1">2</div>Recruit
  </div>
  <div class="arrow-line"></div>
  <p>
    <i class="arrow right"></i>
  </p>
  <div class="circletext">
    <div class="circle-1">3</div>Training and <br>Collaboration
  </div>
  <div class="arrow-line"></div>
  <p>
    <i class="arrow right"></i>
  </p>
  <div class="circletext">
    <div class="circle-1">4</div>Support
  </div>
</div>
Tags:

2

Answers


  1. 0

    It’s not perfect but some insights:

    1. Use flex for responsivity
    2. Looks like you copied your arrow from W3Schools but made the wrong adjustments.
    3. I didn’t found a good way to both center the text as the circle. Maybe consider refining it one by one..
    /* First use flex to evenly spread the elements */
.container {
 display: flex;
 width: 100%;
 justify-content: space-between
}

/* Now make this circle */
.circle {
  border: 1px solid blue;
  border-radius: 50%;
  text-align: center;
  width: 20px;
}

/* Next do the line */
.arrow-line {
  width: calc(100% - 22px);
  border-top: 1px solid blue;
  position: relative;
  bottom: 30px;
  left: 20px;
}

.element {
  width: 100%;
  position: relative;
}

.arrow {
  border: solid blue;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  position: absolute;
  right: 2px;
  top: 5px;
}

.content {
  height: 18px;
  position: relative;
}

.recenter {
  transform: translateX(-45%);
  text-align: center;
}
    <div class="container">
  <div class="element">
      <div class="circle">1</div>
      <div class="content">Planning</div>
    <div class="arrow-line"></div>
    <p>
      <i class="arrow right"></i>
    </p>
  </div>
  <div class="element">
    <div class="circletext">
      <div class="circle">2</div>
      <div class="content recenter">Recruit</div>
    </div>
    <div class="arrow-line"></div>
    <p>
      <i class="arrow right"></i>
    </p>
    </div>
    <div class="element">
    <div class="circletext">
      <div class="circle">3</div>
      <div class="content recenter">Training and <br> Collaboration</div>
    </div>
    <div class="arrow-line"></div>
    <p>
      <i class="arrow right"></i>
    </p>
    </div>
    <div class="circletext">
      <div class="circle">4</div>
      <div class="content recenter">Support</div>
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    You deffinitely need to change markup, so that the arrows were dependant on the elements they are connecting/ Something like this

    .circle{
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: flex-start;
    text-align: center;
}

.circletext{
  position: relative;
    display: flex;
    padding-top: 10px;
    margin-top: 10px;
    align-items: center;
    flex-direction: column;
    font-size: 25px;
    font-weight: 800;
    line-height: 29px;
    letter-spacing: 0.03em;
    text-align: left;
    color: #595555;
  aspect-ratio: 1;
  
  
}
.circletext:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(50% + 40px);
  top: 50px;
  height: 2px;
  width: calc(100% - 80px);
  background-color: red;
}

.circletext:not(:last-child)::after {
  content: '';
  position: absolute;
  left: calc(150% - 60px);
  top: 42px;
  height: 10px;
  width: 10px;
  border: solid red;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
}
.circle-1 {
  display: flex;
  align-items: center;
  justify-content: center;
    background-color:#fff;
    border:2px solid #0070BA;    
    height:70px;
    width: 70px;
    border-radius:50%;
    color: #0070BA;
    text-align: center;
    font-size: 25px;
    line-height: 60px;
}
    <div class="circle">
  <div class="circletext">
    <div class="circle-1">1</div>Planning
  </div>
  <div class="circletext">
    <div class="circle-1">2</div>Recruit
  </div>
  <div class="circletext">
    <div class="circle-1">3</div>Training and <br>Collaboration
  </div>
  <div class="circletext">
    <div class="circle-1">4</div>Support
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search