Clip-path без отсечения содержимого

Я пытаюсь создать фон в форме с помощью clip-path, но я не хочу обрезать дочерние элементы / содержимое этого div.

Вот код

div{
  -webkit-clip-path: polygon(0 57%, 100% 21%, 100% 100%, 0% 100%);
    clip-path: polygon(0 57%, 100% 21%, 100% 100%, 0% 100%);
    background-color: red;
}

<html>
<body>
<div class = "content">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat doloremque porro modi, aliquam nulla cupiditate voluptatibus similique iusto labore iure voluptatem odit facilis quaerat architecto dolorum reiciendis esse ratione aspernatur?
  Perferendis eos aliquid tenetur quia reprehenderit ab quaerat fuga nulla magnam dolore. Eligendi distinctio, et, velit, natus error iste quos animi autem vitae tempora veniam tenetur aspernatur? Consequuntur, qui quis.
  Quibusdam, dolorum aperiam ex veniam, nemo itaque assumenda magni earum laboriosam consequuntur porro nam tempora quo odit. Ex animi autem non repellat veniam labore inventore, libero, excepturi ipsam possimus in.
  Velit iste blanditiis esse quis repellendus. Sit beatae nihil provident, enim rem totam autem excepturi sequi eaque consectetur tenetur magni maxime blanditiis illo, esse optio voluptatem neque veritatis. Perferendis, voluptatem!
  Delectus voluptates optio tempora dolorum iure labore, tenetur explicabo! Quis impedit consequatur maiores, neque inventore nihil quam corporis ducimus excepturi, sequi totam ipsa itaque et ex fugit, libero doloremque labore?
</div>
</body>
</html>

css clip-path

12.01.2019 12:12

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

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

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

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

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

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

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

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

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

107

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

Ответы 1

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

Замените его градиентом:

div.content {
  background: 
    /*first gradient start at 30px with a height of 40%*/
    linear-gradient(to bottom right, transparent 49.5%, red 50%) 0 30.3px/ 100% 40%, 
    /*second gradient start at bottom with a height of 60% - 30px (the remaining space)*/
    linear-gradient(red, red) bottom/100% calc(60% - 30px);
  background-repeat: no-repeat;
  max-width:700px;
}

<div class = "content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat doloremque porro modi, aliquam nulla cupiditate voluptatibus similique iusto labore iure voluptatem odit facilis quaerat architecto dolorum reiciendis esse ratione aspernatur? Perferendis
    eos aliquid tenetur quia reprehenderit ab quaerat fuga nulla magnam dolore. Eligendi distinctio, et, velit, natus error iste quos animi autem vitae tempora veniam tenetur aspernatur? Consequuntur, qui quis. Quibusdam, dolorum aperiam ex veniam, nemo
    itaque assumenda magni earum laboriosam consequuntur porro nam tempora quo odit. Ex animi autem non repellat veniam labore inventore, libero, excepturi ipsam possimus in. Velit iste blanditiis esse quis repellendus. Sit beatae nihil provident, enim
    rem totam autem excepturi sequi eaque consectetur tenetur magni maxime blanditiis illo, esse optio voluptatem neque veritatis. Perferendis, voluptatem! Delectus voluptates optio tempora dolorum iure labore, tenetur explicabo! Quis impedit consequatur
    maiores, neque inventore nihil quam corporis ducimus excepturi, sequi totam ipsa itaque et ex fugit, libero doloremque labore?
  </div>

Или используйте clip-path для псевдоэлемента:

div.content {
  max-width: 700px;
  position: relative;
  z-index: 0;
}

.content:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: polygon(0 57%, 100% 21%, 100% 100%, 0% 100%);
  background-color: red;
}

<div class = "content">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat doloremque porro modi, aliquam nulla cupiditate voluptatibus similique iusto labore iure voluptatem odit facilis quaerat architecto dolorum reiciendis esse ratione aspernatur? Perferendis
  eos aliquid tenetur quia reprehenderit ab quaerat fuga nulla magnam dolore. Eligendi distinctio, et, velit, natus error iste quos animi autem vitae tempora veniam tenetur aspernatur? Consequuntur, qui quis. Quibusdam, dolorum aperiam ex veniam, nemo
  itaque assumenda magni earum laboriosam consequuntur porro nam tempora quo odit. Ex animi autem non repellat veniam labore inventore, libero, excepturi ipsam possimus in. Velit iste blanditiis esse quis repellendus. Sit beatae nihil provident, enim
  rem totam autem excepturi sequi eaque consectetur tenetur magni maxime blanditiis illo, esse optio voluptatem neque veritatis. Perferendis, voluptatem! Delectus voluptates optio tempora dolorum iure labore, tenetur explicabo! Quis impedit consequatur
  maiores, neque inventore nihil quam corporis ducimus excepturi, sequi totam ipsa itaque et ex fugit, libero doloremque labore?
</div>

что я должен сделать, чтобы правый угол красного цвета оказался наверху

— 12.01.2019 12:42

@booota отрегулируйте положение, я сделал его так, чтобы он начинался с 30 пикселей, просто замените на 0, а также удалите 30 пикселей из размера нижнего градиента

— 12.01.2019 12:46

12.01.2019 12:15