Каким простым способом сделать hr

185

21 июня 2018, 20:50

.preim { 
  background-color: #292929; 
  position: relative; } 
  .preim__caption { 
    color: white; 
    font-family: 'Proxima_Nova_Semibold', sans-serif; 
    font-size: 30px; 
    width: 488px; 
    margin-left: 170px; 
    padding-bottom: 50px; } 
  .preim__items { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    padding-bottom: 70px; } 
  .preim__item { 
    width: 20%; 
    text-align: left; 
    padding: 0 30px; } 
  .preim__title { 
    color: white; 
    font-family: "Proxima_Nova"; 
    font-size: 18px; 
    padding: 15px 0 20px; } 
  .preim__disc { 
    color: #e8e7e7; 
    font-family: "Proxima_Nova"; 
    font-size: 13px; 
    font-weight: 300; 
    line-height: 15px; 
    width: 170px; } 
  .preim__icon { 
    width: 68px; 
    height: 68px; 
    border: 1px solid rgba(255, 255, 255, 0.3); 
    border-radius: 50%; 
    position: relative; 
    z-index: 3; } 
    .preim__icon img { 
      border-radius: 50%; 
      background-color: #27a4ff; 
      position: absolute; 
      top: 0; 
      right: 0; 
      left: 0; 
      bottom: 0; 
      margin: auto; } 
    .preim__icon-block { 
      background: red; 
      width: 100px; 
      position: relative; 
      z-index: 2; } 
  .preim__lines { 
    position: absolute; 
    top: 144px; 
    width: 90%; 
    z-index: 1; } 
  .preim__line { 
    width: 85%; 
    height: 0px; 
    border-bottom: 3px dashed #27a4ff; 
    position: relative; 
    margin-top: 35px; 
    margin-bottom: 20px; 
    margin: 0; } 
  .preim__line:after { 
    content: ""; 
    border-left: 10px solid #27a4ff; 
    border-right: 0px solid transparent; 
    border-top: 8px solid transparent; 
    border-bottom: 5px solid transparent; 
    position: absolute; 
    left: 100%; 
    top: -5px; } 
    @mixin line { 
    width: 85%; 
    height: 0px; 
    border-bottom: 3px dashed #27a4ff; 
    position: relative; 
    margin-top: 35px; 
    margin-bottom: 20px 
} 
@mixin lineAfter { 
    content: ""; 
    border-left: 10px solid #27a4ff; 
    border-right: 0px solid transparent; 
    border-top: 8px solid transparent; 
    border-bottom: 5px solid transparent; 
    position: absolute; 
    left: 100%; 
    top: -5px; 
}

<section class="preim"> 
  <div class="preim__lines"> 
    <div class="preim__line"></div> 
  </div> 
  <div class="container"> 
    <div class="preim__caption">Несколько преимуществ и причин, почему выбирают именно нас:</div> 
    <div class="preim__items"> 
      <div class="preim__item"> 
        <div class="preim__icon"><img src="../img/preim/adv_icon_1.png" width="50px" height="50px" alt="img1"/></div> 
        <div class="preim__title">Приемлемая цена</div> 
        <p class="preim__disc">Компания осуществляет международные автомобильные перевозки уже более  10 лет. </p> 
      </div> 
      <div class="preim__item"> 
        <div class="preim__icon"><img src="../img/preim/adv_icon_2.png" width="50px" height="50px" alt="img2"/></div> 
        <div class="preim__title">Скорость работы</div> 
        <p class="preim__disc">Компания осуществляет международные автомобильные перевозки уже более  10 лет.</p> 
      </div> 
      <div class="preim__item"> 
        <div class="preim__icon-block"> 
          <div class="preim__icon"><img src="../img/preim/adv_icon_3.png" width="50px" height="50px" alt="img3"/></div> 
        </div> 
        <div class="preim__title">Свои грузчики</div> 
        <p class="preim__disc">Компания осуществляет международные автомобильные перевозки уже более  10 лет. </p> 
      </div> 
    </div> 
  </div> 
</section>.

Подскажите каким простым способом сделать синий hr как на картинке. Думаю про псевдоэлементы, но не удобно.

Вопрос как сделать красный фон выше hr? z-index не помогает

Answer 1

*{ 
  margin:0; 
  padding:0; 
} 
 
.line{ 
  width:500px; 
  height:0; 
  border-bottom:4px dashed blue; 
  margin:100px auto; 
  position: relative; 
} 
.line:after{ 
  content:""; 
  border-left:16px solid blue; 
  border-right:0px solid transparent; 
  border-top:8px solid transparent; 
  border-bottom:8px solid transparent; 
  position: absolute; 
  left:100%; top:-6px; 
}