There is such an element, I do not know how to impose it. I made the background, but on a smaller resolution the block becomes narrower and the arrow turns out to be a curve.

Here's how: enter image description here

This is what happens with a smaller resolution: enter image description here

HTML:

<div class="pdl0 col-md-4 col-md-offset-7 col-sm-4 col-sm-offset-7 col-xs-12 col-lg-4 col-lg-offset-7"> <div class="des-prugl"> <div class="top_pr"> <p><b>кв. </b><span class="numb">45</span> <span class="dom">дом</span> 1 <span class="dom">этаж 1</span></p> </div> <div class="body_pr"> <p><b>Общая площадь - </b>100 м²</p> <p><b>Полезная площадь</b> - 80 м²</p> <p><b>Балкон - </b>100 м²</p> <p><b>Санузел 1 - </b>100 м² совмещенный</p> <p><b>Санузел 2 - </b>100 м² раздельный</p> <p><b>Отделка - </b>дизайнерская</p> </div> </div> </div>

CSS:

 section .des-prugl { background: url('../img/pramugl.png') no-repeat; padding: 10px 0 325px 0; color: #fff; font-size: 1.188em; }
  • is this blue block itself? - user33274

1 answer 1

I did it, I don’t know if it’s right or not, if not, correct it.

 section .des-prugl { background: url('../img/pramugl.png') no-repeat **top center**; padding: 10px 0 325px 0; color: #fff; font-size: 1.188em; max-width: 365px; margin: 0 auto; }

But it seems to work.