3

<svg viewBox="0 0 30 500" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      .line{
        fill: none;
        stroke: #ccc;
        stroke-width: 3;
      }
    </style>
  </defs>
  <line x1="15" x2="15" y1="0" y2="180" class="line"/>
  <line x1="15" x2="15" y1="320" y2="500" class="line"/>
  <path d="m0,250 30,0"  class="line"/>
  <path d="m15,230 0,40"  class="line"/>
</svg>

1
  • 1
    фиксированным где?
    – Grundy
    31 мар 2020 в 10:46

1 ответ 1

6

Как вариант так:

 body{
   height: 100vh;
   margin: 0;
 }
 .line{
   fill: none;
   stroke: #ccc;
   stroke-width: 3;
      }
svg{
   height: 100vh;
}
<svg viewBox="0 0 30 500" height="200px" xmlns="http://www.w3.org/2000/svg">
  <line x1="15" x2="15" y1="0" y2="180" class="line"/>
  <path d="m0,250 30,0"  class="line"/>
  <path d="m15,230 0,40"  class="line"/>
<line x1="15" x2="15" y1="320" y2="500" class="line"/>
</svg>

Но я бы сделал так, без svg:

body{
  margin: 0;
  
}
.lines{
  float: left;
  width: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  color: #ccc;
  font-weight: bold;
  font-size: 24px;
  margin: 0px 10px;
}
.lines::before{
  content: "";
  background: #ccc;
  float: left;
  height: calc(50vh - 14px);
  width: 2px;
 }
 .lines::after{
   content: "";
   background: #ccc;
   float: left;
   height: calc(50vh - 13px);
   width: 2px;
}
<div class="lines">+</div>

1
  • 3
    Хорошие, полезные решения 31 мар 2020 в 12:23

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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