时间戳

首页 > 解决方案 > 不剪辑内容的剪辑路径

css - 不剪辑内容的剪辑路径

问题描述

我正在尝试使用剪辑路径创建形状背景，但我不想剪辑该 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>

标签： cssclip-path

解决方案

用渐变替换它：

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>

或者在伪元素上使用剪辑路径：

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>

推荐阅读