Адаптивный блок с косыми углами?

Question

[2007-2017]

Подскажите, пожалуйста, как лучше всего сделать треугольный блок?
Пример:

Видел разные примеры, но, они не вяжутся с моей задачей. Или я чего-то не понимаю...

Answer 1

[Вова Дружаев]

На любой вкус codepen.io/alanhouser/pen/zrXJpW

Answer 2

[2007-2017]

Нашёл ещё один хороший способ:

.triagle {
  background: #000;
  height: 400px;
  -webkit-clip-path: polygon(0% 18%, 50% 0%, 100% 18%);
}

Answer 3

[Сергей Громов]

На быструю руку накидал пример, в данном примере блок и 2 треугольника codepen.io/reskwer/pen/jVXdRZ?editors=0100
<div class="block"></div>

.block{
  width: 300px;
  height: 100px;
  background: #5C72FA;
  position: relative;
}

.block:before{
  content: '';
  position: absolute;
  bottom: -20px;
  left: 0;
  border: 20px solid transparent;
  border-left: 150px solid #5C72FA;
}

.block:after{
  content: '';
  position: absolute;
  bottom: -20px;
  right: 0;
  border: 20px solid transparent;
  border-right: 150px solid #5C72FA;
}

Comments

[Максим]

а если фон не однородный надо будет ??

[Сергей Громов]

. Shadow: Если фон не однородный, тогда маски.. + SVG..

[Максим]

Сергей Громов: ну значит я верно дал пример ..

[Сергей Громов]

. Shadow: вряд ли, ты дал чистый SVG, а толку от него как с козла молока.. он даже маштабируется не прямо-пропорционально.. я имел ввиду css3 маски, когда блок обрезается по форме SVG

[Максим]

Сергей Громов: а что там грязный svg ? я пример поправил , посмотри ссылку ...

[Максим]

Сергей Громов: css3 маски в 90% случаев работают только в Chrome и всё , больше ни где

[Сергей Громов]

. Shadow: там есть крос-браузерный подход )) ну вот давай представим, тебе нужно сделать шапку сапку, только за место цвета там должна быть картинка, я конечно понимаю что в SVG ты легко поставишь картинку а блок в нее ты влепишь ?, ты можешь поступить по другому, сделать ее бакгроундом, но блок то все-равно останется кадратным, блеть, мне надоело, сотни способов как решить такую задачу )))))))) ты отвлекаешь меня, у меня тут галп4 лажает сильно 9(

[Максим]

Сергей Громов: ну ради бога , я спорить то не буду , .