Как сделать такую полоску над картинкой?

Question

Как сделать такую полоску над картинкой?

Рейтинг: 1Ответов: 1Опубликовано: 18.04.2023

Добрый вечер!

Ломаю голову над этим чудом и не пойму как сделать такую полосу над картинкой.

html5 css3

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

У меня так получилось, не знаю как это будет в адаптиве, возможно нужно будет корректировать.

.image-wrapper {
  position: relative;
  overflow: hidden;
}
img {
  width: 100%;
  height: 300px;
  display: block;
  background-color: lightblue;
}
.image-wrapper:before, .image-wrapper:after {
  content: '';
  display: block;
  width: 120%;
  height: 100%;
  position: absolute;
  top: -70%;
  left: -10%;
  right: -10%;
  border-radius: 0 0 100% 100%;
  background-color: #493F28;
  z-index: 6;
}
.image-wrapper:after {
  background-color: #EBCD71;
  top: -68%;
  width: 130%;
  left: -15%;
  right: -15%;
  z-index: 5;
}

<div class="image-wrapper">
  <img src="/" alt="Голубой фон - это картинка">
</div>

Как сделать такую полоску над картинкой?

Ответы