<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фиксированным где?– Grundy ♦31 мар 2020 в 10:46
Добавить комментарий
|
1 ответ
Как вариант так:
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>
-
3