Как сверстать это?

Question

Мне нужно сверстать вот это (именно блок ниже заголовков):

По итогу я сделал разметку:

 <div class="steps-block">
                <div class="steps-img"><img src="img/steps/woman-with-headset.png" alt=""></div>
                <div class="steps-img"><img src="img/steps/clock.png" alt=""></div>
                <div class="steps-img"><img src="img/steps/money.png" alt=""></div>
                <div class="steps-img"><img src="img/steps/folded-document.png" alt=""></div>
                <div class="steps-img"><img src="img/steps/calendar.png" alt=""></div>
            </div>

И хотел сделать стрелочки с помощью ::after

.steps
    &-block
        display: flex
        justify-content: space-around
    &-img
        width: 100px
        height: 100px
        border: 3px solid #ffd200
        display: flex
        justify-content: center
        align-items: center
        border-radius: 50%
        &:after
            content: ''
            background: url('../img/steps/arrow_curved.png')
            width: 72px
            height: 25px
            position: absolute

Но в итоге у меня проблема такая, что я не могу оттолкнуть стрелочку снизу с помощью margin-bottom, а если использовать padding, то она начинается повторять и background-repeat: no-repeat мне не помогает.

Как можно это сверстать лучше?

Answer 1

Для позиционирования с помощью absolute, желательно иметь какие-то элементы с position: relative;- именно от них будете отталкиваться.

.steps-block {
  display: flex;
  justify-content: space-around;
  padding: 50px 0;
}

.steps-img {
  width: 100px;
  height: 100px;
  border: 3px solid #ffd200;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  position: relative;
}
.steps-img:not(:last-child):after {
  content: "";
  position: absolute;
  bottom: 85%;
  left: 11.2vw;
  width: 72px;
  height: 54px;
  background: url("https://i.stack.imgur.com/tj8tw.png");
  transform: rotate(-40deg) scale(-1, 1);
}

<div class="steps-block">
  <div class="steps-img"><img src="img/steps/woman-with-headset.png" alt=""></div>
  <div class="steps-img"><img src="img/steps/clock.png" alt=""></div>
  <div class="steps-img"><img src="img/steps/money.png" alt=""></div>
  <div class="steps-img"><img src="img/steps/folded-document.png" alt=""></div>
  <div class="steps-img"><img src="img/steps/calendar.png" alt=""></div>
</div>

Не смотря на то, что ответ выше был уже принят, подход в нём не совсем верный.

Так как будет ещё текст под кругами, то для центровки, и текст и круги всё равно должны оборачиваться в блоки. Таким образом, правильно будет размещать стрелки относительно границ этих обёрток (сами же обёртки нужно растянуть с помощью justify-content: stretch; flex-grow: 1;). В примере ниже, я подсветил цветами структуру:

body { margin: 0; }

.steps-block {
  display: flex;
  flex-flow: row nowrap;
  justify-content: stretch;
  padding: 100px 0 1em;
  box-shadow: inset 0 0 10px 0px #0a0a;
}

.step-block {
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  box-shadow: inset 0 0 10px 0px #f00a;
}
.step-block:not(:last-child):after {
  content: "";
  position: absolute;
  bottom: 85%;
  right: 0%;
  width: 72px;
  height: 54px;
  background: url("https://i.stack.imgur.com/tj8tw.png");
  transform: rotate(-40deg) scale(-1, 1) translatex(-65%);
  box-shadow: inset 0 0 10px 0px #00bcd4aa;
}

.steps-img {
  width: 100px;
  height: 100px;
  border: 3px solid #ffd200;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 10px 0px #ffd200aa;
}

.steps-txt {
  box-shadow: inset 0 0 10px 0px #00fa;
}

<div class="steps-block">
  <div class="step-block">
    <div class="steps-img"><img src="img/steps/woman-with-headset.png" alt=""></div>
    <div class="steps-txt">
      <p>1</p>
    </div>
  </div>
  <div class="step-block">
    <div class="steps-img"><img src="img/steps/clock.png" alt=""></div>
    <div class="steps-txt">
      <p>2</p>
    </div>
  </div>
  <div class="step-block">
    <div class="steps-img"><img src="img/steps/money.png" alt=""></div>
    <div class="steps-txt">
      <p>3</p>
    </div>
  </div>
  <div class="step-block">
    <div class="steps-img"><img src="img/steps/folded-document.png" alt=""></div>
    <div class="steps-txt">
      <p>4</p>
    </div>
  </div>
  <div class="step-block">
    <div class="steps-img"><img src="img/steps/calendar.png" alt=""></div>
    <div class="steps-txt">
      <p>5</p>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Как сверстать это?

Ответы (1 шт):