Необычный дизайн фона CSS

Я хотел бы создать CSS-фон на «div» с определенным дизайном, и этот дизайн должен быть адаптивным (ширина и высота). Вы можете просмотреть пример, созданный со свойствами «border» внутри «div» со свойствами «position absolute» и разделенными другим «div», но этот пример неверен, потому что когда я увеличиваю экран, ширина не равна 100 %.

Изображение (цвет фиолетовый и прозрачный): Необычный дизайн фона CSS

Код:

.trape {
  min-height: 250px;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  position: absolute;
  border-right: 2000px solid;
  border-right-color: #b60f80;
}

<link href = "http://getbootstrap.com/docs/3.3/dist/css/bootstrap.min.css" rel = "stylesheet" />
<div class = "row">
  <div class = "container">
    <div class = "trape"></div>
    <div class = "col-xs-12 col-md-12 text-centeR">
      <h2 class = "white">¡TEXT MODEL!</h2>
      <p>SIMULATION TEXT ALING MIDDLE</p>
    </div>
  </div>
</div>

Заключение:

Я хотел бы сгенерировать фон css, реагирующий на изображение, например, неиспользуемую «границу», и хочу иметь возможность помещать текст или другие элементы внутри того же div.

Спасибо!

Почему вы не используете svg?

— 15.06.2018 11:45

Я не работал ....

— 15.06.2018 17:14

html css background css-shapes

15.06.2018 11:44

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто используйте градиент и несколько фонов:

.box {
  color:#fff;
  padding:30px 0 30px;
  background:
   linear-gradient(to bottom left,#b60f80 49%, transparent 51%) bottom/100% 30px no-repeat,
   linear-gradient(to top left,#b60f80 49%, transparent 51%) top/100% 30px no-repeat,  
   linear-gradient(#b60f80,#b60f80) center/100% calc(100% - 60px) no-repeat;
}

body {
 background:#ccc;
}

<div class = "box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus lectus vel viverra tincidunt. Quisque vitae malesuada justo, nec porttitor felis. Sed aliquam sem turpis, sit amet pharetra ex blandit luctus. Morbi facilisis vel est eu interdum. Sed semper, erat a molestie tincidunt, purus velit luctus dolor, nec tristique ex neque eget tortor. Vestibulum a rhoncus ex. Aenean neque massa, porta a nulla non, faucibus pretium magna
</div>
<div class = "box">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque luctus lectus vel viverra tincidunt. Quisque vitae malesuada justo, nec porttitor felis. Sed aliquam sem turpis, 
</div>

Я реализовал новый дизайн, но в IE10 и IE11 работает некорректно, дизайн виден плохо .... :(

— 26.06.2018 09:54

@ user3387682 Ах, все еще использую мертвый IE: p ... Я думаю, проблема в том, что я использовал калькуляцию, будет сложно найти альтернативу

— 26.06.2018 09:56

Я тестировал изменение с 49% на 50% и с 51% на 50%, теперь в IE работают правильно, но в других браузерах наклонная линия выглядит плохо определенной

— 26.06.2018 10:10

15.06.2018 11:54