Прежде всего, я использую SVG, и это уже довольно сложно, так как я не смог заставить фоновое изображение работать вообще, ни через CSS, ни через тег img src.
Один известный хак с SVG - это padding-bottom hack, но я недостаточно знаком с ними. Это был единственный способ, которым SVG, похоже, работал, копируя фигуру в Adobe Illustrator, а затем CTRL + V в коде Visual Studio. Как я могу избавиться от всего этого лишнего пространства ниже?
<div class="navbar">
<div class="svg-wrap">
<svg class="svg-item" width="auto" height="100">
<rect x="20" width="20" height="400" fill="white" />
<rect x="60" width="20" height="400" fill="white" />
<rect x="100" width="20" height="400" fill="white" />
</svg>
</div>
<ul class="nav-items">
<li class="nav-link"><a href="#">home</a></li>
<li class="nav-link"><a href="#">about</a></li>
<li class="nav-link"><a href="#">contact</a></li>
<li class="nav-link"><a href="#">portfolio</a></li>
</ul>
</div>
Этот блок кода содержит часть панели навигации, а также три прямоугольника рядом с левым углом
<div class="svg-wrap">
<svg width="100%" height="100%" viewBox="100 0 600 1200">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-width:1;stroke-miterlimit:10;}
</style>
<path class="st0" d="M0,1c118.8,0,118.8,20,237.6,20C356.4,21,356.4,1,475.2,1C594,1,594,21,712.8,21C831.6,21,831.6,1,950.4,1
s118.8,20,237.6,20"/>
</svg>
</div>
Этот следующий пакет является волнистым путем под панелью навигации
<svg class="left-svg" x="0px" y="0px" width="99.7px" height="792.7px"
viewBox="10 12 99.7 792.7" style="enable-background:new 0 0 99.7 792.7;">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
</style>
<line class="st0" x1="99.4" y1="0.4" x2="0.4" y2="99.4"/>
<line class="st0" x1="99.4" y1="99.4" x2="0.4" y2="198.4"/>
<line class="st0" x1="99.4" y1="198.4" x2="0.4" y2="297.4"/>
<line class="st0" x1="99.4" y1="297.4" x2="0.4" y2="396.4"/>
<line class="st0" x1="99.4" y1="396.4" x2="0.4" y2="495.4"/>
<line class="st0" x1="99.4" y1="495.4" x2="0.4" y2="594.4"/>
<line class="st0" x1="99.4" y1="594.4" x2="0.4" y2="693.4"/>
<line class="st0" x1="99.4" y1="693.4" x2="0.4" y2="792.4"/>
</svg>
Это левая сторона страницы
<svg class="right-svg" x="0px" y="0px" width="99.7px" height="792.7px"
viewBox="12 12 99.7 792.7" style="enable-background:new 0 0 99.7 792.7;">
<style type="text/css">
.st0{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
</style>
<line class="st0" x1="0.4" y1="0.4" x2="99.4" y2="99.4"/>
<line class="st0" x1="0.4" y1="99.4" x2="99.4" y2="198.4"/>
<line class="st0" x1="0.4" y1="198.4" x2="99.4" y2="297.4"/>
<line class="st0" x1="0.4" y1="297.4" x2="99.4" y2="396.4"/>
<line class="st0" x1="0.4" y1="396.4" x2="99.4" y2="495.4"/>
<line class="st0" x1="0.4" y1="495.4" x2="99.4" y2="594.4"/>
<line class="st0" x1="0.4" y1="594.4" x2="99.4" y2="693.4"/>
<line class="st0" x1="0.4" y1="693.4" x2="99.4" y2="792.4"/>
</svg>
И, наконец, приведенный выше код является правой стороной страницы.
CSS:
.navbar {
height: 80px;
max-width: 100%;
background-color: black;
display: flex;
justify-content: space-around;
flex-direction: column;
align-items: center;
}
.nav-items {
display: flex;
z-index: 2;
}
.svg-wrap {
position: absolute;
z-index: 1;
}
.svg-item {
padding: 16px;
position: relative;
left: 5px;
}
.left-svg {
position: relative;
top: 45px;
padding-bottom: 120px;
}
.right-svg {
position: relative;
top: 45px;
float: right;
padding-bottom: 120px;
}
Мне бы очень хотелось, чтобы был более понятный / короткий способ показать вам, ребята, мой код, но часть кода SVG связана с другим содержимым HTML, что делает его такимочень долго и нудно. Кроме того, я знаю, что вставка CSS только ухудшает ситуацию! Надеюсь, я не нарушаю никаких правил рассылки спама, это то, что я считаю интересным, я включил небольшое видео , чтобы вы могли видеть, как и где происходит дополнительное пространство.