Jump to content
  • Sign Up
РоманФ

Верстка нестандартных блоков

Recommended Posts

Здравствуйте клиент хочет чтобы картинка была сверстанна полностью именно на html css, кто то сталкивался c такой проблемой? возможно есть советы по тому как это сделать правильно.

Волна по центру и все остальные вещи должны быть заверстанны в том числе.Интересует как это сделать с минимумом костылей.

И остро стоит вопрос чтобы это все дело было адаптивно.

На данный момент все что смог сделать https://jsfiddle.net/RomanFF/jL9swq7h/37/ с border нормальный сделать смогу, не понимаю принцип по которому мне все сопоставить так чтобы не полетело все потом,  мне хотябы общие принципы объяснить в каком направлении дальше двигаться

printchat-1170-4 (1).png

Edited by РоманФ
Написал подробнее

Share this post


Link to post
Share on other sites

РоманФ судя по скругленным окончанием кривой, она сделана с помощью svg. Сделал грубый пример без свг, но принцип остального, думаю, будет понятен:

<div class="wrap">
  <div class="box">
    <div class="line1">
      <div class="item"><span></span></div>
      <div class="item"><span></span></div>
      <div class="item"><span></span></div>
    </div>
    <div class="line2">
      <div class="item"><span></span></div>
      <div class="item"><span></span></div>
    </div>
  </div>
</div>
*,
:after,
:before {
  box-sizing: border-box;
}

.wrap {
  display: flex;
  justify-content: center;
  width: 500px;
  border: 1px solid #000;
  overflow: hidden;
}
.box {
  display: inline-block;
  position: relative;
}
.box:before {
  content: "";
  height: 130px;
  width: 130px;
  position: absolute;
  left: -100px;
  top: 42%;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top: 5px solid #ccc;
}
.box:after {
  content: "";
  height: 130px;
  width: 130px;
  position: absolute;
  right: -100px;
  top: 42%;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top: 5px solid #ccc;
}

.line2 {
  margin-top: 100px;
  margin-left: 77px;
}

.item {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  display: inline-block;
  position: relative;
  background: #f00;
}
.item:not(:last-child) {
  margin-right: 50px;
}
span {
  background: inherit;
}
.line1 .item:after {
  content: "";
  height: 130%;
  width: 130%;
  position: absolute;
  left: -15%;
  top: 40%;
  border-radius: 50%;
  border: 5px solid transparent;
  border-bottom: 5px solid #ccc;
}
.line2 .item:after {
  content: "";
  width: 130%;
  height: 130%;
  position: absolute;
  left: -15%;
  top: -70%;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top: 5px solid #ccc;
}
.line1 .item:before {
  content: "";
  height: 20px;
  width: 20px;
  background: #000;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 156%;
  z-index: 1;
  transform: translateX(-50%);
}
.line2 .item:before {
  content: "";
  height: 20px;
  width: 20px;
  background: #000;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: -78%;
  z-index: 1;
  transform: translateX(-50%);
}
.line1 span:before {
  content: "";
  height: 50px;
  border-left: 1px dotted #000;
  position: absolute;
  left: 50%;
  top: 120%;
  transform: translateX(-50%);
}
.line1 span:after {
  content: "";
  width: 25px;
  height: 25px;
  background: inherit;
  border: 1px solid #00f;
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translate(-50%, -50%) rotate(36deg) skewY(20deg);
  z-index: -1;
}
.line2 span:before {
  content: "";
  height: 50px;
  border-left: 1px dotted #000;
  position: absolute;
  left: 50%;
  top: -70%;
  transform: translateX(-50%);
}
.line2 span:after {
  content: "";
  width: 25px;
  height: 25px;
  background: inherit;
  border: 1px solid #00f;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%) rotate(36deg) skewY(20deg);
  z-index: -1;
}

 

Share this post


Link to post
Share on other sites

Спасибо ребят за потраченно на это время, у меня на разбор ушло и подгон всего этого ушлa куча времени)

Выручили)принцип понял.
Приятно что все конструктивно и по делу.

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.


  • Similar Content

    • By Progrmergr
      <button class="but" onclick="tap">Пельмени</button> Как я могу в JS получить слово "Пельмени"?
    • By shumz
      Задача: Создать линию определённых размеров и расположить её по центру экрана.
      Код HTML: 
      <div class="line"></div>
      Код CSS:
      .line {
          position:absolute
          margin-top:650px;
          height:2px;
          width:1200px;
          background: black;
      }
  • Member Statistics

    46,836
    Total Members
    159
    Most Online
    mrrFan
    Newest Member
    mrrFan
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Здравствуйте. Этот элемент UI, как правило, реализовывается через иконки (иконочный шрифт). На реализацию можете взглянуть https://antennaio.github.io/jquery-bar-rating/
    • Приветствую, пользователь. Делаю верстку по макету и надо сделать звездочки (Скриншот прикрепил), как я понял по макету они просто высвечиваются, возможности ставить оценку не должно быть. Так вот как лучше сверстать это, чтобы, например, когда проект уйдет в продакшн людям с админки было бы удобнее выставлять их. Я просто поместил фото звездочки в div и продублировал звездочку нужное количество раз, а также применил float:right (скриншот прикрепил) . Был вариант сделать с помощью чекбоксов (выключить их и поменять иконку на звездочку), но подумал, что это костыль. Так вот как лучше сверстать это и правильно ли использовать в таком случае float в 2020 году? Звездочки выравнивались по левой стороне блока и другого способа выровнять по правой стороне не пришло в голову.
    • <button class="but" onclick="tap">Пельмени</button> Как я могу в JS получить слово "Пельмени"?
  • Popular Contributors

×
×
  • Create New...