Как сверстать вот такой блок : ? :

Question

Задача сверстать так чтоб бекграунд, в данном случае картинка с воздушными шарами, внизу блока там где якорь была как бы обрезана от центра в обе стороны под углом. Пробовал clip-path, но не шибко получается. Так как же ???

Вот так я пробывал реализовать :

.start {
    position: relative;
    background: limegreen;
    clip-path: inset(4% 0% 14% 0%);
    clip-path: circle(600px at 50% 42% );
}

**И вот что получается (внизу): **

**И вот что получается (вверху): **

К тому же clip-path обрезает изображение-элемент: якорь, внизу страницы

Answer 1

С этим справится SVG

Рисуем path по нужным координатам и присваиваем ему фон в виде pattern в котором изображение растянуто на 100% высоты и ширины на весь SVG документ

Смотрим результат

Всю картину можно увидеть здесь

<body style="margin: 0;">
  <svg viewBox="0 0 1000 520">
  <defs>
    <mask id="mask">
      <rect width="100%" height="100%" fill="#fff" ></rect>
        <circle cx="500" cy="500" r="20" fill="#000"></circle>
    </mask>
    <pattern id="ptn" width="100%" height="100%">
      <image width="100%" height="100%" x="0" y="0"
             preserveAspectRatio="none"
             href="https://s2.best-wallpaper.net/wallpaper/3840x2160/1709/Brasov-Romania-meadows-field-mountains-grass-clouds_3840x2160.jpg"></image>
    </pattern>
  </defs>
  <path d="M0,0 1000,0 1000,400 500,500 0,400z" mask="url(#mask)" fill="url(#ptn)"/>
  </svg>

Answer 2

Вот так это можно реализовать при помощи clip-path

<style>
.container {
width: 400px;
height: 300px;
position: relative;
margin: auto;
border: 1px solid red;
}
.clip {
width: 400px;
height: 300px;
position: absolute;
clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 70%, 0 50%);
background: limegreen;
}
.anchor {
width: 25px;
height: 25px;
border-radius: 50%;
position: absolute;
background: white;
bottom: 85px;
text-align: center;
left: 187px;
}
</style>
<div class="container">
<div class="clip">
<div class="anchor">&#x2693;</div>
</div>
</div>

БЛОГ НА HUSL

Как сверстать вот такой блок : ? :

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