Синяя секция заканчивается треугольником. Далее идет карта. Карта интерактивная. При ресайзе треугольник всегда должен быть на ширину всего окна браузера.
.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>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Подскажите пожалуйста, может есть у кого-то вариант летающей колибри, нужна анимация на css или js, уже перерыл все знакомые источники, так ничего...