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,832
    Total Members
    159
    Most Online
    eoschool
    Newest Member
    eoschool
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

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

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

    • Как видно на фото, ссылка доступна только по тексту, а если нажать на саму кнопку-ничего не происходит. Помогите, пожалуйста, исправить это, код прилагается: <div id="connect" class="connect-header" bis_skin_checked="1"> <button type="button" style=" display: inline-block; background: #00aeff; color: white; width: 100%; height: 50px; border: 0; cursor: pointer; border-radius: 12px; margin-top: 5px; "><a href="http://aqua-pure.pp.ua/index.php?route=information/contact"><i class="material-icons" style=" color: white; ">call</i><span style=" color: white; ">Оставить заявку</span></a></button><a href="http://aqua-pure.pp.ua/index.php?route=information/contact"> </a></div>  
    • Друзья, хочу вам рассказать о нашем чате в Телеграм https://t.me/seoreef Здесь вы можете: получить квалифицированную помощь профессионала-лингвиста, бесплатно; узнать как пишется слово или выражение, бесплатно; получить информацию о новых постах в нашем блоге и о акциях/скидках.
    • Как защитить бизнес благодаря облачному бекап-хостингу вместе с Tucha Потерять важные данные нередко означает разрушить работу всей компании. Но есть решение, которое поможет сохранить бизнес в случае критических ситуаций! Это — резервные копии, размещённые в надёжном хранилище отдельно от основной информации. Провайдер облачных решений Tucha призывает защитить свой бизнес от потери важных данных! Бекап-хостинг в облаках от Tucha поможет обеспечить: ·       надёжное хранение резервных копий на удалённых серверах; ·       доступ к данным из любого уголка мира 24×7; ·       лёгкое масштабирование хранилища. Подробнее: https://tucha.ua/ru/services/tuchabackup  Позаботьтесь об информационной безопасности своей компании прямо сейчас! Звоните +380 44 583-5-583 или пишите на sales@tucha.ua и получите наилучшее решение для своей задачи.
  • Popular Contributors

    Nobody has received reputation this week.

×
×
  • Create New...