没有剪切内容的剪切路径

问题描述

我正在尝试使用剪切路径创建一个有形状的背景，但是我不想剪切该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！           

>