Синяя секция заканчивается треугольником. Далее идет карта. Карта интерактивная. При ресайзе треугольник всегда должен быть на ширину всего окна браузера.
.clip-polygon {
width: 100%;
height: 95px;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%);
background-color: #5252527d;
position: absolute;
text-align: center;
color: white;
font-size: 21px;
}
.map {
width: 100%;
min-height: 500px;
background-color: #ffaeae;
}
.wrapper {
position: relative;
}
<div class="wrapper">
<div class="clip-polygon">
<p>Выезжем к Вашему авто
<br/>в любую точку Москвы</p>
</div>
<div class="map"></div>
</div>
:root {
--color: #000;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.items {
border: 1px solid #000;
width: 80%;
position: relative;
margin:30px auto;
}
.item {
width: 100%;
min-height: 300px;
border-top: 40px solid var(--color);
position: relative;
padding-top: 60px;
overflow: hidden;
}
.item p {
width: 90%;
margin: auto;
}
.item:after {
content: "";
border-left: 40vw solid transparent;
border-right: 40vw solid transparent;
border-top: 50px solid var(--color);
border-bottom: 0 solid transparent;
position: absolute;
left: 0;
right: 0;
top: 0;
}
.header-title {
color: #fbfbfb;
font-variant: small-caps;
position: absolute;
top: 0;
z-index: 10;
max-width: 300px;
padding: 20px 0;
margin: auto;
left: 0;
right: 0;
text-align: center;
}
<div class="items">
<p class="header-title">
Lorem ipsum dolor sit amet,<br>consectetur adipisicing elit. Quod, et!
</p>
<div class="item">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae ea natus sunt, nam tenetur nesciunt, est reprehenderit dolore, alias, eius sit quod! Est totam blanditiis voluptatem deleniti quas voluptatum culpa aperiam quidem sunt ducimus quae,
possimus quos eligendi nihil odio dolorem! Ipsum blanditiis quaerat voluptate officia dolores at pariatur minima doloribus quasi, culpa, id. Eius dignissimos praesentium quae id debitis excepturi dolorum repellat cupiditate necessitatibus porro
voluptate, dicta mollitia ea maxime fugiat in harum dolores doloremque itaque eveniet commodi! Voluptatum sed sapiente et, numquam dolor suscipit, temporibus eius, corporis ratione itaque quisquam atque iure quo fugit! Minima, exercitationem, facilis!
Consequuntur.</p>
</div>
</div>
Сборка персонального компьютера от Artline: умный выбор для современных пользователей