Блок со срезанными нижними углами

Question

Как сделать вот такой треугольник с текстом внутри? Чтобы был кроссбраузерным и на разных мониторах фигура не ломалась. Кое что сделал, но на большом экране всё плывёт.

.block-main {
  position: relative;
  background: #e5e5e5;
  min-height: 250px;
}
h3 {
  text-align: center;
  padding: 25px;
}
.left {
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-block;
  border: 120px solid transparent;
  border-bottom: 0px solid transparent;
  border-right: 0px solid transparent;
  border-left: 250px solid #fff;
}
.right {
  position: absolute;
  bottom: 0;
  right: 0;
  display: inline-block;
  border: 120px solid transparent;
  border-bottom: 0px solid transparent;
  border-right: 250px solid #fff;
  border-left: 0px solid transparent;
}

<div class="block-main">
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nam quo nihil natus, tenetur, consequatur eius neque consectetur deserunt labore recusandae dolor blanditiis eligendi delectus optio tempora culpa excepturi sed!</h3>
		<div class="left"></div>
    <div class="right"></div>
</div>

Answer 1

Вариант с помощью CSS свойства clip-path

* {
  margin: 0;
  padding: 0;
}

h1,
p {
  padding: 0 50px;
  text-align: center;
  line-height: 1.7;
  font-family: sans-serif;
}

.a {
  position: relative;
  width: 100%;
  margin-bottom: 200px;
  background-color: lightgray;
}

.a:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 50px;
  left: 0;
  right: 0;
  bottom: -50px;
  background-color: lightgray;
  -webkit-clip-path: polygon(0 0, 100% 0%, 50% 100%);
  clip-path: polygon(0 0, 100% 0%, 50% 100%);
}

<div class="a">
  <h1>Что такое Справедливость?</h1>
  <p>Справедливость — это положительное свойство и качество характера человека, выражающееся в способности беспристрастно следовать правде, истине в своих поступках и мнениях и в любых обстоятельствах.</p>
  <p>Справедливость дочь беспристрастности. Быть справедливым, значит быть непредвзятым, относиться ко всему без предубеждения. Например, оценивая людей, нужно быть рассудительным и иметь опыт оценки действий и поступков. Человек не может поступать правильно,
    если в его характере присутствует элемент несправедливости.</p>
</div>
<div class="b"></div>

Answer 2

html, body {
  height: 100%;
  background: linear-gradient(to bottom, red, blue);
  margin: 0;
  padding: .5em;
  box-sizing: border-box;
}

div {
  position: relative;
  text-align: center;
  padding: 1em;
  margin-bottom: 3em;
  background: silver;
}

div::before, div::after {
  content: "";
  position: absolute;
  top: 100%;
  width: 50%;
  height: 3em;
}

div::before {
  left: 0;
  background: linear-gradient(to right top, transparent calc(50% - .5px), silver calc(50% + .5px));
}

div::after {
  right: 0;
  background: linear-gradient(to left top, transparent calc(50% - .5px), silver calc(50% + .5px));
}

<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente nam quo nihil natus, tenetur, consequatur eius neque consectetur deserunt labore recusandae dolor blanditiis eligendi delectus optio tempora culpa excepturi sed!
</div>

Answer 3

Вариант c помощью border и псевдоэлементов before и after. 100% адаптивно и кроссбраузерно.

* {
  margin: 0;
  padding: 0;
}

h1,
p {
  padding: 0 50px;
  text-align: center;
  line-height: 1.7;
  font-family: sans-serif;
}

.a {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 50px;
  margin-bottom: 200px;
  background-color: lightgray;
}

.a:before,
.a:after {
  content: "";
  display: block;
  width: 50vw;
  position: absolute;
  bottom: 0;
  border-bottom: 50px solid white;
}

.a:before {
  left: 50vw;
  border-left: 50vw solid lightgray;
}

.a:after {
  right: 50vw;
  border-right: 50vw solid lightgray;
}

<div class="a">
  <h1>Что такое Справедливость?</h1>
  <p>Справедливость — это положительное свойство и качество характера человека, выражающееся в способности беспристрастно следовать правде, истине в своих поступках и мнениях и в любых обстоятельствах.</p>
  <p>Справедливость дочь беспристрастности. Быть справедливым, значит быть непредвзятым, относиться ко всему без предубеждения. Например, оценивая людей, нужно быть рассудительным и иметь опыт оценки действий и поступков. Человек не может поступать правильно,
    если в его характере присутствует элемент несправедливости.</p>
</div>
<div class="b"></div>

И вариант с прозрачностью:

html {
  min-height: 100%;
  background: linear-gradient(to bottom, red, blue);
  background: repeating-linear-gradient(to bottom, red, blue 3em);
}

body {
  background: transparent;
}

* {
  margin: 0;
  padding: 0;
}

h1,
p {
  padding: 0 50px;
  text-align: center;
  line-height: 1.7;
  font-family: sans-serif;
}

.a {
  position: relative;
  width: 100%;
  padding-bottom: 50px;
  margin-bottom: 50px;
  background-color: lightgray;
}

.a:before,
.a:after {
  content: "";
  width: 50vw;
  position: absolute;
  top: 100%;
  border-bottom: 50px solid transparent;
  box-sizing: border-box;
}

.a:before {
  left: 50%;
  border-left: 50vw solid lightgray;
}

.a:after {
  right: 50%;
  border-right: 50vw solid lightgray;
}

.b {
  color: white;
}

<div class="a">
  <h1>Что такое Справедливость?</h1>
  <p>Справедливость — это положительное свойство и качество характера человека, выражающееся в способности беспристрастно следовать правде, истине в своих поступках и мнениях и в любых обстоятельствах.</p>
  <p>Справедливость дочь беспристрастности. Быть справедливым, значит быть непредвзятым, относиться ко всему без предубеждения. Например, оценивая людей, нужно быть рассудительным и иметь опыт оценки действий и поступков. Человек не может поступать правильно,
    если в его характере присутствует элемент несправедливости.</p>
</div>
<div class="b">Normal flow... Normal flow... Normal flow...</div>

Answer 4

С однородным фоном : 3 строчки

<body style="margin:0;">
  <svg viewBox="0 0 1000 500" xmlns="http://www.w3.org/2000/svg">
  <path d="M0,0 1000,0 1000,400 500,500 0,400z" fill="blue"/>
</svg>

С неоднородным фоном: 10 строк SVG

<body style="margin: 0;">
  <svg viewBox="0 0 1000 400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <pattern id="ptn" width="100%" height="100%">
      <image href="https://avatars.mds.yandex.net/get-pdb/1370139/83b288d4-0acb-4a52-ab62-f5fb0abc3298/s1200"
             width="100%" height="100%" 
             preserveAspectRatio="none"/>
    </pattern>
  </defs>
  <path d="M0,0 1000,0 1000,250 500,350 0,250z" fill="url(#ptn)"/>
</svg>

С каким то содержимым

<body style="margin: 0;">
  <svg viewBox="0 0 1000 400" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <style>
      .t1{
        font-size: 30px;
        text-transform: uppercase;
        font-weight: 700;
      }
      .t2{
        font-size: 24px;
      }
    </style>
    <pattern id="ptn" width="100%" height="100%">
      <image href="https://avatars.mds.yandex.net/get-pdb/1370139/83b288d4-0acb-4a52-ab62-f5fb0abc3298/s1200"
             x="0" y="-50"
             width="100%" height="100%" 
             preserveAspectRatio="none"/>
    </pattern>
  </defs>
  <path d="M0,0 1000,0 1000,200 500,300 0,200z" fill="url(#ptn)"/>
  <text x="300" y="20%" class="t1">Что такое Справедливость?</text>
  <foreignObject x="250" y="100" width="600" height="160" class="t2">
      In the context of SVG embedded in an HTML document, the XHTML 
      namespace could be omitted, but it is mandatory in the 
      context of an SVG document
    </div>
  </foreignObject>
</svg>

БЛОГ НА HUSL

Блок со срезанными нижними углами

Ответы (4 шт):