no__name

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

Recommended Posts

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

9Auh1CyA.png

Edited by no__name

Share this post


Link to post
Share on other sites

Малость переделал стрелочку, теперь можно обойтись одним псевдоэлементом. А значит у вас из кода можно будет убрать .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;
}

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
10 минут назад, no__name сказал:

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

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

Share this post


Link to post
Share on other sites
4 минуты назад, no__name сказал:

Ок, спасибо

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,439
    Total Members
    3,128
    Most Online
    Talomir
    Newest Member
    Talomir
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.