Как отрисовать данный "узор" в блоке header? (CSS)

Question

Применены следующие стили для header

.header {
    position: relative;
    background-image: url(../img/main-picture.jpeg);
    background-size: cover;
    background-repeat: no-repeat; 
    background-position: center;
    min-height: 100vh;
    position: relative;
    border-radius: 20px;
    margin-bottom: 77px;
}

Понимаю, что нужно использовать :before, но ничего схожего не могу отрисовать и уже перерыла весь интернет. Хэлпуйте

Answer 1

В данном случае фигура простая, я бы для её реализации использовал radial-gradient:

body {margin: 0;}

.banner {
  display: block;
  width: 100%;
  height: 95vh;
  border-radius: 0 0 20px 20px;
  background-image:
    radial-gradient(ellipse at top left, transparent calc(72.5% - .99px), #fff 72.5%),
    radial-gradient(ellipse at top right, transparent calc(72.5% - .99px), #fff 72.5%),
    url('https://i.imgur.com/T4sV3Qz.png');
  background-repeat: no-repeat;
  background-position:
    calc(50% - 30px) 100%,
    calc(50% + 30px) 100%,
    center center;
  background-size: 
    60px 30px,
    60px 30px,
    cover;
}

<div class="banner"></div>

БЛОГ НА HUSL

Как отрисовать данный "узор" в блоке header? (CSS)

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