СSS и HTML. Как реализовать линии?

149

30 июля 2019, 01:00

Как проще всего с помощью CSS и HTML реализовать линии, обведенные желтым?

.modal-dialog { 
  width: 1000px; 
} 
 
.modal-content { 
  background-color: #c2c2c2; 
  width: 1000px; 
  height: 500px; 
} 
 
.modal-title { 
  text-align: left; 
} 
 
.sound { 
  display: inline-block; 
  width: 50%; 
  float: left; 
} 
 
.question { 
  display: inline-block; 
  width: 50%; 
} 
 
.sound_title { 
  color: #ffffff; 
  font-family: Helvetica; 
  font-size: 20px; 
  font-weight: 700; 
} 
 
.sound_desc { 
  color: #010100; 
  font-family: Helvetica; 
  font-size: 14px; 
  font-weight: 400; 
  line-height: 18px; 
  padding: 15px 10px 0px 30px; 
} 
 
.sound_title:before { 
  content: ''; 
  width: 20px; 
  height: 5px; 
  background-color: #ff0000; 
  display: inline-block; 
  vertical-align: middle; 
  margin-right: 10px; 
} 
 
.aim { 
  margin-top: 30px; 
  position: absolute; 
  top: 55%; 
} 
 
.modal-title { 
  padding-top: 20px; 
} 
 
.aim_desc { 
  color: #010100; 
  font-family: Helvetica; 
  font-size: 14px; 
  font-weight: 400; 
  line-height: 18px; 
  padding: 15px 25px 0px 30px; 
}

<div class="modal-content"> 
  <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
    <div class="title modal-title" id="myModalLabel"><span class="title_span title_modal">ПОДРОБНЕЕ</span> О ДВЕРИ</div> 
  </div> 
  <div class="modal-body"> 
    <div class="sound"> 
      <div class="sound_title">ПРЕВОСХОДНАЯ ЗВУКОИЗОЛЯЦИЯ</div> 
      <div class="sound_desc">двухкомпонентный пенополиуретан высокой плотности служит лучшим термосберегающим наполнителем. Данный материал равномерно заполняет все полотно и при застывании в горячих прессах связывается со всеми элементами, образуя единый моноблок и термозащиту. 
        А также хорошо поглощает звуковые волны благодаря своим физическим свойствам. (Волна звука гасится в пузырьках пены)</div> 
    </div> 
    <div class="question"> 
      <div class="quest_titile title"><span class="title_span quest_span">ОСТАЛИСЬ</span> ВОПРОСЫ?</div> 
      <div class="quest_input"> 
        <form class="form-inline" action="/action_page.php"> 
          <input type="name" id="email" placeholder="ИМЯ" name="email"> 
          <input class="phone_clear" type="phone" id="pwd" placeholder="ТЕЛЕФОН" name="pswd"> 
          <button class="submit_form" type="submit">ОТПРАВИТЬ</button> 
        </form> 
      </div> 
    </div> 
    <div class="sound aim"> 
      <div class="sound_title aim_title">ЦЕЛЬНАЯ КОНСТРУКЦИЯ</div> 
      <div class="sound_desc aim_desc">Дверной блок выполнен по бессварной технологии на высокоточном оборудовании - цельногнутая конструкция. Полотно не имеет сварных швов (основная точка коррозии).</div> 
    </div> 
  </div> 
</div>

Answer 1

    .modal-content:after{
    content: ".";
    color: #ff000000;
    background-color: red;
    display: inline-block;
    width: 2px;
    height: 500px;
    position: absolute;
    top: 8px;
    left: 500px;
}
.modal-content:before{
    content: ".";
    color: #ff000000;
    background-color: red;
    display: inline-block;
    width: 580px;
    height: 2px;
    position: absolute;
    bottom: 149px;
    left: 8px
}
 .modal-header:after{
        content: ".";
    color: #ff000000;
    background-color: red;
    display: inline-block;
    width: 580px;
    height: 2px;
    position: absolute;
    top: 50px;
    left: 428px;
}