没有剪切内容的剪切路径 [英] clip-path without clipping content
本文介绍了没有剪切内容的剪切路径的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用剪切路径创建一个有形状的背景，但是我不想剪切该div的子对象/内容。
这里是代码
div {-webkit-clip-path：多边形（0 57％，100％ 21％，100％100％，0％100％）；剪切路径：多边形（0 57％，100％21％，100％100％，0％100％）；背景颜色：红色；}
< html>< ; body>< div class = content> Lorem ipsum dolor坐着，自学成才。 Fugiat doloremque porro modi，aliquam nulla cupiditate voluptatibus similique iusto labour iure voluptatem odi facilis quaerat architecto dolorum reiciendis esse ratione aspernatur？ Perferendis eos aliquid liquid tenetur quia reprehenderit ab quaerat fuga nulla magnam dolore。 Eligendi Differentio等，velit，自然错误iste quos animi autem vitae tempora veniam tenetur aspernatur？结果，qui quis。 Quibusdam，dolorum aperiam ex veniam，nemo itaque承担magni earum labouriosam consequuntur porro nam tempora quot odt。例如，可以用自由，无用和无用的方法来代替油罐车，也可以用油罐车来代替。请坐在Beatae Nihil Provident，Enim Rem Totam Autem，Equiuri Conquitetur Tenetur Magni Maxime Blanditiis illo，Espresso Voluptatem Neque Veritatis。 Perferendis，Voluptatem！ Delectus使tempo tempora dolorum iure labour变身，tenetur explicabo！ quis impeditate后果，maires，neque inventore nihil quam corporis ducimusexcepturi，sequi totam ipsa itaque et ex fugit，libero doloremque laboure？ p $ p>
解决方案
用渐变替换它：
div.content {背景：/ *第一个渐变起始于30px，高度为40％* /线性-gradient（右下角，透明49.5％，红色50％）0 30.3px / 100％40％，/ *第二个渐变从底部开始，高度为60％-30px（剩余空间）* /线性渐变（红色，红色）底部/ 100％calc（60％-30px）;背景重复：不重复； max-width：700px;}
< div class = 内容> Lorem ipsum dolor坐着，自学成才。 Fugiat doloremque porro modi，aliquam nulla cupiditate voluptatibus similique iusto labour iure voluptatem odi facilis quaerat architecto dolorum reiciendis esse ratione aspernatur？ Perferendis eos aliquid liquid tenetur quia reprehenderit ab quaerat fuga nulla magnam dolore。 Eligendi Differentio等，velit，自然错误iste quos animi autem vitae tempora veniam tenetur aspernatur？结果，qui quis。 Quibusdam，dolorum aperiam ex veniam，nemo itaque承担magni earum labouriosam consequuntur porro nam tempora quot odt。例如，可以用自由，无用和无用的方法来代替油罐车，也可以用油罐车来代替。请坐在Beatae Nihil Provident，Enim Rem Totam Autem，Equiuri Conquitetur Tenetur Magni Maxime Blanditiis illo，Espresso Voluptatem Neque Veritatis。 Perferendis，Voluptatem！ Delectus使tempo tempora dolorum iure labour变身，tenetur explicabo！是否可以立即消除后果，是否可以免除发明，不希望发生什么，是否可以解除劳动合同？ < / div>
或在伪元素：
div.content {max-width：700px;职位：相对z-index：0;}。content：before {content：;位置：绝对； z索引：-1；最高：0;左：0；正确：0；底部：0剪切路径：多边形（0 57％，100％21％，100％100％，0％100％）；背景颜色：红色；}
< div class = 内容> Lorem ipsum dolor坐着，自学成才。 Fugiat doloremque porro modi，aliquam nulla cupiditate voluptatibus similique iusto labour iure voluptatem odi facilis quaerat architecto dolorum reiciendis esse ratione aspernatur？ Perferendis eos aliquid liquid tenetur quia reprehenderit ab quaerat fuga nulla magnam dolore。 Eligendi Differentio等，velit，自然错误iste quos animi autem vitae tempora veniam tenetur aspernatur？结果，qui quis。 Quibusdam，dolorum aperiam ex veniam，nemo itaque承担magni earum labouriosam consequuntur porro nam tempora quot odt。例如，可以用自由，无用和无用的方法来代替油罐车，也可以用油罐车来代替。请坐在Beatae Nihil Provident，Enim Rem Totam Autem，Equiuri Conquitetur Tenetur Magni Maxime Blanditiis illo，Espresso Voluptatem Neque Veritatis。 Perferendis，Voluptatem！ Delectus使tempo tempora dolorum iure labour变身，tenetur explicabo！ >
div>
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>
解决方案
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>
这篇关于没有剪切内容的剪切路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
