5

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

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

введите сюда описание изображения

7
  • 1
    это несложно сделать бэкграунд-градиентом 8 апр 2020 в 17:08
  • @StrangerintheQ: проблема всегда возникает при "резине". Причём, независимо от подхода. SVG - оптимальный вариант.
    – UModeL
    8 апр 2020 в 17:39
  • @UModeL для попыток было бы неплохо увидеть альтернативный layout 8 апр 2020 в 17:40
  • @UModeL, вроде нет проблем при резине...
    – Qwertiy
    8 апр 2020 в 20:16
  • @StrangerintheQ, что за альтернативный лейаут?
    – Qwertiy
    8 апр 2020 в 20:16

4 ответа 4

9

Вариант с помощью 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>

13
  • 1
    ужас какой-то, каждую неделю/две задают один и тот же вопрос :/
    – meine
    8 апр 2020 в 19:25
  • Только не очень-то оно и кроссбраузерно.
    – Qwertiy
    8 апр 2020 в 19:52
  • А я тоже сделал.
    – Qwertiy
    8 апр 2020 в 20:15
  • 1
    @UModeL, на усли в 5 раз увеличить, то заметно: i.stack.imgur.com/0wNFu.png - ещё и по краям вылез пиксель. Но обычно нормально. Если сделать оба по 50%, то будет хорошая такая лесенка, а так немного размывается и получается нормально. Можно попробовать по полпикселя в каждую сторону делать, чтобы края не лезли.
    – Qwertiy
    8 апр 2020 в 20:41
  • 1
    @Sevastopol', border не умеет проценты, так что печалька.
    – Qwertiy
    8 апр 2020 в 20:42
7

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>

6

Вариант 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>

2
  • 1
    Добавил вариант с прозрачностью. Справа немного торчит угол от border'а - это как раз та проблема из-за скролла, о которой я говорил. В принципе можно всё обернуть в ещё один div с overflow: hidden и этот угол подрежется.
    – Qwertiy
    8 апр 2020 в 21:21
  • 1
    В первом решении есть ещё косяк - overflow: hidden прячет ошибку, из-за которой псевдоэлементы вдвое больше чем надо. Надо либо использовать правильный box-sizing, либо поставить размеры в 0 и всё будет хорошо. PS: Не стал править.
    – Qwertiy
    8 апр 2020 в 21:22
5

С однородным фоном : 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>

18
  • Сомнительный responsive. Высота же тоже меняется - это ещё допиливать придётся. Ну и в данный момент это не фон.
    – Qwertiy
    9 апр 2020 в 8:59
  • @Qwertiy открой на весь экран и сожми браузер .. 9 апр 2020 в 9:00
  • @Sevastopol' я только за svg так как это круто просто ...что угодно с ниим можно делать 9 апр 2020 в 9:15
  • @Sevastopol' да...верно понимаешь ...только я не понимаю, с каким контентом ? 9 апр 2020 в 9:24
  • @MaximLensky, ну смотри: в вопросе речь о каком-то полезном контенте, за которым идёт декоративная стрелка. Я бы предположил, что стрелка фиксированной высоты, впрочем в вопросе об этом не говорится. Но контент-то точно высоту не уменьшает при уменьшении ширины - если там фиксированная высота, то она не меняется, если по контенту, то наоборот будет расти. А при масiтабировании svg с сохранением пропорций высота тоже уменьшается. Т. е. формально это да, responsive, но фактически под вопрос не подходит.
    – Qwertiy
    9 апр 2020 в 9:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.