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 shumz
      Задача: Создать линию определённых размеров и расположить её по центру экрана.
      Код HTML: 
      <div class="line"></div>
      Код CSS:
      .line {
          position:absolute
          margin-top:650px;
          height:2px;
          width:1200px;
          background: black;
      }
    • By Five
      Как можно поднять фиолетовый блок (находится в MAIN) вверх , чтобы он заполнил верхнюю прозрачную часть заднего плана HEADER-а?
      Свое образный переход будет... 

  • Member Statistics

    46,834
    Total Members
    159
    Most Online
    Progrmergr
    Newest Member
    Progrmergr
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...