Как сверстать подобное?

Question

[Александр Коновалов]

Здравствуйте! Как сверстать подобный блок, чтобы он был адаптивным?

Comments

[Rustam Bainazarov]

SVG на абсолютном позиционировании. Во всю ширину и высоту блока.

[Александр Коновалов]

Рустам Байназаров, а можете пример скинуть?

[Rustam Bainazarov]

Александр Коновалов, написал ответ.

Answer 1

[Rustam Bainazarov]

Comments

[Александр Коновалов]

Рустам Байназаров у меня есть вот такая картинка в svg, я могу ее вставить в этот код?
https://svgshare.com/s/CSV

[Rustam Bainazarov]

Александр Коновалов, не совсем. Иконку мельницы надо только делать отдельным блоком. Я сделал класс под неё (.item__icon).

[Rustam Bainazarov]

Плюс, я вижу закругление на краях, которого не было на скриншотах. Это закругление будет искажаться и этого не избежать. Проще отказаться от него (как на скриншоте в описании вопроса).

[Александр Коновалов]

Рустам Байназаров, я сделал вот так:

<div class="stock"><div class="stock-left">При заключении договора на строительство — колодец/скважина БЕСПЛАТНО!</div></div>

.stock
{
  background: url(banner-stock.svg) no-repeat;
  width: 960px;
  height: 271px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.stock-left
{
  width: 340px;
  margin: 0 80px;
  color: #fff;
  font-size: 22px;
}

[Rustam Bainazarov]

Александр Коновалов, мне это ни о чем не говорит :))

Answer 2

[Ragtime Kitty]

Можно вот так, резиновый блок получился, с фиксированными отступами у стрелки, через media достаточно одну переменную менять, если нужно.

Comments

[Александр Коновалов]

Ragtime_Kitty спасибо! Скажите, пожалуйста, у меня есть вот такая картинка в svg, я могу ее вставить в этот код?
https://svgshare.com/s/CSV

[Ragtime Kitty]

Александр Коновалов, Вставить-то можете, но эта картинка уже содержит в себе стрелку. У вас есть картинка где просто колодец?

[RAX7]

Александр Коновалов, там внутри svg растровая картинка, поэтому просто вставь её в png
https://jsfiddle.net/txaovzpj/