CODEWITHSUNDEEP
cssclip-path
Assad Nazar
Assad Nazar

Reputation: 1464

clip-path without clipping content

I am trying to create a shaped background using clip-path but i dont want to clip the children/content of that div.

Here is the code

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>

Upvotes: 2

Views: 469

Answers (1)

Temani Afif
Temani Afif

Reputation: 272590

Replace it with a gradient:

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>

Or use the clip-path on a pseudo element:

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>

Upvotes: 3

Related Questions