0

в адаптиве очень плохо смотрится, даже на 1050 сьежает

.container {
     padding: 0 30px;
     margin: 0 auto;
     max-width: 1190px;
}
 .wrap {
     display: flex;
     margin: 0 -12px;
}
 .item {
     margin: 0 12px;
     background-color: #eee;
     padding: 20px;
     padding-bottom: 108px;
}
 .item {
     position: relative;
}
 .item:nth-child(even):before {
     position: absolute;
     content: ' ';
     bottom: 14px;
     left: 0px;
     width: 100%;
     height: 65px;
     background-position: left -445px bottom;
     background-repeat: no-repeat;
     background-size: cover;
     background-image: url('https://svgshare.com/i/_Xm.svg');
}
 .item:nth-child(odd):before {
     position: absolute;
     content: ' ';
     bottom: 14px;
     left: 0px;
     width: 100%;
     height: 65px;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: left -220px bottom;
     background-image: url('https://svgshare.com/i/_Xm.svg');
}
 .item:first-child:after {
     position: absolute;
     content: ' ';
     bottom: 38px;
     left: 40px;
     width: 48px;
     height: 48px;
     border-radius: 50%;
     background-color: #c8d1f2;
     background-image: url('https://svgshare.com/i/_Xm.svg');
     background-position: center;
     background-repeat: no-repeat;
}
 .item:first-child:before {
     position: absolute;
     content: ' ';
     bottom: 14px;
     left: 88px;
     width: calc(100% - 88px);
     height: 65px;
     background-image: url('https://svgshare.com/i/_Xm.svg');
     background-position: left 10px bottom;
     background-repeat: no-repeat;
     background-size: cover;
}
 * {
     box-sizing: border-box;
}
 *:after, *:before {
     box-sizing: border-box;
}
 
<div class="container">
  <div class="wrap">
  <div class="item">
    <h3>title 1</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum debitis inventore suscipit pariatur, rem distinctio consectetur sequi. Voluptates laborum eos dicta laboriosam quia cupiditate rem beatae non, debitis laudantium enim?</p>
  </div>
    <div class="item">
    <h3>title 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum debitis inventore suscipit pariatur, rem distinctio consectetur sequi. Voluptates laborum eos dicta laboriosam quia cupiditate rem beatae non, debitis laudantium enim?</p>
  </div>
</div>
</div>

1

2 ответа 2

1

Если к примеру одну и туже картинку вставить тегом внутрь блока то получается терпимо вроде бы ... между блоками скачка или явного различия не заметно но остаётся одно проблема которая не значительная .. это шарик то есть начало линии

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  display: block;
  max-width: 100%;
}

.wrapper {
  padding: 0 30px
}

.items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 30px;
}

.item {
  background: #ccc;
  padding: 40px 0px;
  position: relative;
  overflow: hidden;
}

.item p {
  margin-bottom: 30px;
  width: 90%;
  margin: auto;
  font-size: 0.5em;
}

.item img {
  position: absolute;
  bottom: 10px;
  left: 0;
}
<div class="wrapper">
  <div class="items">
    <div class="item">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur eligendi voluptatum impedit perspiciatis ullam architecto, dolores deleniti nam repellat vitae corrupti temporibus dolor optio earum libero vel consequuntur aliquam.
      </p>
      <img src="https://svgshare.com/i/_Xm.svg" alt="">
    </div>
    <div class="item">
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Magni eveniet error, harum alias aspernatur atque incidunt, nisi voluptatum ex rerum nemo eaque quam porro, quaerat inventore nobis temporibus impedit blanditiis.
      </p>
      <img src="https://svgshare.com/i/_Xm.svg" alt="">
    </div>
  </div>
</div>

0

Предлагаю просто разделить полоски, что двигаются с шариком, разделить на две части after/before , где последняя часть будет статична, схожая с ближайшим элементом. Других вариантов быть не может, так как это изображение.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.