БЛОГ НА HUSL


Как реализовать сложную пунктирную линию на сайте (как на картинке)?

Автор вопроса: Darya Rockh 

.info {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.info-container {
  position: relative;
  width: 100%;
}

.info__dashed-line__container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 42%;
  z-index: 99;
  background: no-repeat url(../../images/line.svg);
}

.info__add {
  width: 100%;
  height: 100%;
  position: relative;
  margin-bottom: 75px;
  overflow: hidden;

}

.info__background {
  width: 100%;
  margin: 0 0 0 0;
}

.info__add__buttons {
  display: flex;
  justify-content: center;
  top: 50%;
  position: absolute;
  width: 100%;
}

.add__button {
  width: 15%;
  min-width: 200px;
  height: 80px;
  background-color: #2a2d34;
  color: #ffffff;
  font-size: 24px;
  border-radius: 10px;
  margin: 15px;
}

.info_text__codeR-container,
.info_text__dayR-container {
  display: flex;
  justify-content: flex-start;
  align-items: start;
}

.code {
  margin-top: 100px;
}

.info_text {
  max-width: 55%;
  width: 55%;
  height: auto;
  margin-bottom: 25px;
  background-color: #fee600;
  border-radius: 20px;

  & p {
    font-size: 24px;
    margin: 55px 45px 55px 45px;
    text-indent: 15%;
  }
}

.info__text__codeR,
.info__text__dayR {
  margin-top: 3%;
  margin-right: -10%;
  z-index: 9;
}

@media (max-width: 1450px) {
  .code__picture {
    width: 600px;
  }

  .info__text__codeR,
  .info__text__dayR {
    margin-top: 4%;
  }
}

@media (max-width: 1250px) {
  .code__picture {
    width: 400px;
    height: 20px;
  }

  .info__text__codeR,
  .info__text__dayR {
    margin-top: 5%;
  }
}


@media (max-width: 1000px) {
  .add__button {
    font-size: 18px;
  }

  .info_text p {
    font-size: 18px;
  }

  header {
    margin-left: 10%;
    margin-right: 10%;
  }

  .add__button {
    height: 50px;
  }

  .info__text__codeR,
  .info__text__dayR {
    margin-top: 6%;
  }
}

@media (max-width: 850px) {

  .info__text__codeR,
  .info__text__dayR {
    margin-top: 6%;
  }

  .code__picture {
    width: 250px;
    height: 20px;
  }

}

@media (max-width: 800px) {

  .info__text__codeR,
  .info__text__dayR {
    margin-top: 7%;
  }
}

@media (max-width: 650px) {

  .info__text__codeR,
  .info__text__dayR {
    margin-top: 9%;
  }

  .code__picture {
    width: 200px;
    height: 25px;
  }
}

@media (min-width: 550px) {

  .info__date,
  .info__motto {
    display: none;
  }
}

@media (max-width: 550px) {
  .add__button {
    height: 30px;
    margin: 5px;
  }

  .info__add__buttons {
    flex-direction: column;
    align-items: center;
  }

  .info__date {
    font-family: DejaVuSans;
    color: #111111;
    background-color: #ffff;
    height: 50px;
    width: 200px;
    border-radius: 20px;
    text-align: center;
    margin: 5%;
  }

  .info__motto {
    text-align: center;
  }

  .info__add {
    background-color: #fee600;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .info__background {
    display: none;
  }

  .info_text__codeR-container {
    margin-right: 20%;
  }

}

@media (max-width: 350px) {
  .info_text__codeR-container {
    margin-right: 10%;
  }

}

body {
    width: 100%;
}

.wrapper {
  margin: 0;
  padding: 0;
  font-family: DejaVuSans;
  overflow-x: hidden !important;
}

.decoration {
    display: flex;
    margin-top: 25px;
    left: 90px;
    position: absolute;
}

.decoration__line {
    width: 40px;
    height: 10px;
    background-color: #000000;
    margin-right: 25px;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30px;
    margin-left: 20%;
    margin-right: 20%;
}

.header__logo {
    width: 375px;
    height: 65px;
}

.header__menu {
    display: flex;
    flex-wrap: no-wrap;
}

.header__menu__item {
    font-size: 24px;
    color: #000000;
    font-family: DejaVuSans;
    margin: 30px;
    

    &:hover {
        text-decoration: none;
        color: #fee600;
    }
}

@media (max-width: 1250px) {
      .header__logo {
        display: flex;
        text-align: center;
  }

  .logo_img {
        width: 200px;
        height: 50px;
  }
}

@media (max-width: 1000px) {
    .header__menu__item {
        font-size: 18px;
    }

    .decoration__line {
        display: none;
    }
}

@media (max-width: 850px) {
        .header__menu__item {
        margin: 15px;
    }
}

@media (max-width: 700px) {
    .header__menu__item {
        margin: 10px;
    }
    
    .logo_img {
        width: 150px;
        height: 20px;
    }

    .header__logo {
        width: 150px;
        height: 20px;
    }
}

@media (min-width: 550px) {
    .header__hamburger {
        display: none;
    }
}

@media (max-width: 550px) {
    .header__hamburger {
        display: block;
        height: 50px;
        width: 50px;
    }

    .header__menu {
        display: none;
    }
}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Building Company</title>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="public/stylesheets/main.css">
    <link rel="stylesheet" type="text/css" href="fonts/DejaVuSans.ttf">
  </head>

  <body>
    <div class="wrapper">
      <!-- wrapper -->
      <!--    header -->
      <div class="decoration">
        <div class="decoration__line"></div>
        <div class="decoration__line"></div>
      </div>
      <header>
        <div class="header__hamburger">
          <img src="images/hamburger_menu_icon_149466.svg" alt="" class="header__hamburger">
        </div>
        <div class="header__logo">
          <img src="images/logo.jpg" class="logo_img">
        </div>
        <nav class="header__menu">
          <a href="#" class="header__menu__item">Описание</a>
          <a href="#" class="header__menu__item">Программа</a>
          <a href="#" class="header__menu__item">Регистрация</a>
        </nav>
      </header>

      <!--      info -->
      <div class="info">
        <div class="info-container">
          <div class="info__background-container">
            <img src="images/app.jpg" alt="" class="info__background">
          </div>
          <div class="info__dashed-line__container">
            <!--             <img src="images/line.svg" alt="" class="info__dashed-line"> -->
          </div>
          <p class="info__date">20-22 октября <br> теперь онлайн</p>
          <p class="info__motto">Та самая IT-конференция в Омске <br> теперь онлайн</p>
          <div class="info__add__buttons">
            <button class="add__button">Программа</button>
            <button class="add__button">Регистрация</button>
          </div>

          <div class="info_text__codeR-container code">
            <div class="info__text__codeR">
              <img src="images/codeR.png" alt="" class="code__picture">
            </div>
            <div class="info_text">
              <p> - Самая крупная IT-конференция в Омске. В этом году мы расширяем границы и выходим в онлайн, чтобы поделиться своим опытом в построении технологических решений и познакомиться с крутыми кейсами коллег из других компаний. Лучшие практики и дельные советы, подробные tutorials и заряжающие воркшопы – скорее к программе!</p>
            </div>
          </div>

          <div class="info_text__codeR-container">
            <div class="info__text__dayR">
              <img src="images/dayR.png" alt="" class="code__picture">
            </div>
            <div class="info_text">
              <p> - Первый день конференции для студентов и начинающих специалистов в IT. Вы сможете погрузиться в работу Raiffeisen Tech Center – от тестирования продуктов до техподдрежки – и даже попробовать себя в роли сотрудников Service Desk в игровом формате. Не пропустите этот день, если хотите определиться с направлением работы в IT, прокачать свои навыки в QA/тех. Администрировании или попасть в нашу крутую команду.</p>
            </div>
          </div>
        </div>
      </div>



    </div><!-- wrapper -->
  </body>



</html>


Источник

Ответы (1 шт):

Автор решения: Zhihar

можно сделать так (Только надо добавить стиль который говорит, что через блок можно нажимать по другим блокам):

т.е. основная мысль - ломанную линию разбить на прямоугольники, границами которой являются части этой линии, сами блоки разместить через position: absolute;

.lines {
  position:       absolute;
  pointer-events: none;
}

.line1 {
  top:          10px;
  left:         0px;
  
  width:        100px;
  height:       10px;
  
  border-top:   2px dashed red;  
}

.line2 {
  top:          10px;
  left:         100px;
  
  width:        50px;
  height:       80px;
  
  border-top:     2px dashed red;
  border-right:   2px dashed red;
}

.line3 {
  top:          90px;
  left:         65px;
  
  width:        75px;
  height:       25px;
  
  border-top:     2px dashed red;
  border-left:    2px dashed red;
}

.line4 {
  top:          115px;
  left:         65px;
  
  width:        125px;
  height:       10px;
  
  border:       2px dashed red;
  border-left:  none;
}

.line5 {
  top:          130px;
  left:         0px;
  
  width:        65px;
  height:       40px;
  
  border-right:       2px dashed red;
  border-bottom:      2px dashed red;
}
<div class = 'lines line1'></div>
<div class = 'lines line2'></div>
<div class = 'lines line3'></div>
<div class = 'lines line4'></div>
<div class = 'lines line5'></div>

Если же нужны черточки заданных характеристик, то тогда использование border уже не подходит и надо использовать background, например:

  background-image: linear-gradient(to right, #333 50%, transparent 50%);
  background-size: 16px;

в этом случае каждый элемент ломанной линии - это отдельный прямоугольник толщиной с толщину линии

.line1 {
    position: absolute;
    top:      10px;
    left:     25px;
    
    width:    150px;
    height:   4px;
    
    background-image: linear-gradient(90deg, #333 50%, transparent 50%);
    background-size: 25px;  
}
<div class = 'line1'></div>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.