Альтернативный вариант верстки секции

[no__name]

Добрый вечер, ребят. Нужно было сверстать секцию(см. картинку). Долго думал как вот это вот все можно реализовать и таки набросал черновой вариант. Собственно у меня вопрос: можно ли это сверстать как-то попроще ? Ну и в дополнение к вопросу, кому не сложно, можете оценить верстку?

Edited August 13, 2019 by no__name

[AlexZaw]

Малость переделал стрелочку, теперь можно обойтись одним псевдоэлементом. А значит у вас из кода можно будет убрать .wrap и кружочки сделать с помощью второго псевдоэлемента для .block

По поводу верстки - зачем вы все с помощью абсолютного позиционирования двигаете? Можно флексами обойтись.

Код для стрелочки:

<div class="box"></div>

.box{
  height: 100px;
  width: 200px;
  background: red;
  border-radius: 10px;
  position: relative;
}
.box:after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) rotateX(180deg);
  width: 40px;
  height: 50px;
  background-image: radial-gradient(at 100% 30%, transparent, transparent 79%, red 80%, red),
    radial-gradient(at 0% 30%, transparent, transparent 79%, red 80%, red);
  background-position: 20px;
}

 

[no__name]

AlexZaw, добрый вечер. Спасибо за ответ. Быстренько сверстал флексами. Возможно, вы это имели в виду?

[AlexZaw]

10 минут назад, no__name сказал:

Возможно, вы это имели в виду?

Сильно в код не вникал, но в целом да. Сами видите насколько код меньше и чище получился 🙂

[no__name]

Ок, спасибо

[AlexZaw]

4 минуты назад, no__name сказал:

Ок, спасибо

Да не за что. Я ведь вас только направил в нужное русло, остальное вы сделали сами 🙂 Ну а со стрелочкой самому интересно повозиться было 🙂