верстка блока с использованием svg в качестве background

Question

Прошу помочь в верстке блока показанного на картинке. Необходимо что бы получился именно такой background. Я использую svg

.reviews__svg {
position: absolute;
        top: 0;
        width: 100%;
        z-index: -1;
}

<svg class="reviews__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1600 849"><path d="M-1 0l802 61 799-61v789l-799 60-802-60V0z" fill="#44444f" fill-rule="evenodd"/></svg>

и вот такой CSS

position: absolute;
        top: 0;
        width: 100%;
        z-index: -1;

но при разрешении более 1600px background заходит на следующий блок.

получиться должно вот так -

Answer 1

Только не ясно почему именно svg ведь это можно сделать и на css

смотреть на весь экран

body {
  margin: 0;
}

.item {
  position: relative;
}

.shape {
  width: 100%;
  height: 550px;
  background: #42424e;
  clip-path: polygon(0 0, 50% 10%, 100% 0, 100% 80%, 50% 100%, 0 80%);
}

.user {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.user div {
  margin: 30px 0;
}

.icon img {
  display: inline-block;
  width: 100px;
}

.name {
  color: #6a6979;
  font-size: 20px;
  line-height: 0;
}

.bio {
  color: #6a6979;
}

.rect {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #00e5a7;
  border-radius: 8px;
}

.rect.full {
  width: 50px;
}

<div class="item">
  <div class="shape"></div>
  <div class="user">
    <div class="icon">
      <img src="https://www.pngkey.com/png/full/839-8398000_sign-up-to-join-the-conversation-girl-flat.png" alt="">
    </div>
    <div class="name">
      Kate Denings
    </div>
    <div class="bio">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias hic quasi expedita tempora, impedit ipsum provident asperiores animi sunt pariatur similique nesciunt! Temporibus dignissimos et, accusamus sit assumenda pariatur laboriosam!
    </div>
    <div class="navigation">
      <div class="rect"></div>
      <div class="rect"></div>
      <div class="rect full"></div>
    </div>
  </div>
</div>

Версия на SVG

не нашёл зелёную кавычку

body {
  margin: 0;
  font-family: sans-serif;
}

<svg viewBox="0 -5 900 505" xmlns="http://www.w3.org/2000/svg" width="640">
  <defs>
    <style>
      .name{ fill: #09e2b7;  text-transform: capitalize; font-size: 26px; font-weight: 700;}
      .specials{ fill: #747385; text-transform: capitalize; font-size: 16px; font-weight: 400;}
      .description{ fill: #747385; font-size: 16px; font-weight: 400;}
      .marker{ fill:  #09e2b7;}
    </style>
  </defs>
  <path d="M0,0 450,50 900,0 900,450 450,500 0,450z" fill="#42424e"/>
  <image x="400" y="100" width="100" height="100"  
         href="https://www.pngkey.com/png/full/839-8398000_sign-up-to-join-the-conversation-girl-flat.png"/>
  <image x="480" y="90" width="50" height="40"  href="http://cdn.onlinewebfonts.com/svg/img_314111.png"/>
  <text x="370" y="230" class="name">kate benings</text>
  <text x="380" y="270" class="specials">caligraphy expecrt</text>
  <text x="50" class="description">
    <tspan x="160"  y="300">Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores vero debitis</tspan>
    <tspan x="140"  y="320">enim accusantium libero suscipit et perferendis quibusdam. Accusantium labore</tspan>
    <tspan x="240"  y="340">reiciendis dignissimos tempora saepe laboriosam atque.</tspan>
  </text>
  
  <circle cx="400" cy="400" r="10" class="marker"></circle>
  <circle cx="440" cy="400" r="10" class="marker"></circle>
  <rect x="470" y="390" ry="10" width="60" height="20" class="marker"/>
</svg>

БЛОГ НА HUSL

верстка блока с использованием svg в качестве background

Ответы (1 шт):