Как можно сделать такой вот треугольник?

176
26 апреля 2018, 07:02

Синяя секция заканчивается треугольником. Далее идет карта. Карта интерактивная. При ресайзе треугольник всегда должен быть на ширину всего окна браузера.

Answer 1

.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>

Answer 2

: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>

READ ALSO
Не могу понять, почему переменная null

Не могу понять, почему переменная null

Может кто подскажет, почему

142
Анимированная колибри

Анимированная колибри

Подскажите пожалуйста, может есть у кого-то вариант летающей колибри, нужна анимация на css или js, уже перерыл все знакомые источники, так ничего...

203
Проблемы с кодировкой (но это не точно)

Проблемы с кодировкой (но это не точно)

Всем приветВозникли проблемы с кодировкой

221