Jump to content
  • Sign Up
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
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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Member Statistics

    46,873
    Total Members
    1,451
    Most Online
    riyasteve
    Newest Member
    riyasteve
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...