Question

我正在尝试生成一个带有撕纸效果的盒子。到目前为止，我已经尝试过，只找到了代码笔的这个链接，它实现了我想做的部分工作：https://codepen.io/dsm-webdsigner/pen/dYBRYw

缺少的是我需要在纸张的所有四个方面实现纸张效果。据我所知，它是使用CSS的clip-path proper和polygon（）函数实现的。

-webkit-clip-path: polygon(0% 0%, 5%  100%, 10% 0%, 15%  100%, 20% 0%, 25% 100%, 30% 0%, 35%  100%, 40% 0%, 45%  100%, 50% 0%, 55%  100%, 60% 0%, 65%  100%, 70% 0%, 75%  100%, 80% 0%, 85%  100%, 90% 0%, 95%  100%, 100% 0%,0% 0%, 5%  100%, 10% 0%, 15%  100%, 20% 0%, 25% 100%, 30% 0%, 35%  100%, 40% 0%, 45%  100%, 50% 0%, 55%  100%, 60% 0%, 65%  100%, 70% 0%, 75%  100%, 80% 0%, 85%  100%, 90% 0%, 95%  100%, 100% 0%,0% 0%, 5%  100%, 10% 0%, 15%  100%, 20% 0%, 25% 100%, 30% 0%, 35%  100%, 40% 0%, 45%  100%, 50% 0%, 55%  100%, 60% 0%, 65%  100%, 70% 0%, 75%  100%, 80% 0%, 85%  100%, 90% 0%, 95%  100%, 100% 0%);

任何人都可以帮我弄清楚如何在所有4方面实现这些效果吗？提前谢谢。

Answer 1

它只是顶部和底部，因为在该示例中，before上只有{2}使用了after和.content-box。你需要另外两个元素来左右涟漪＆＃39;效果。

为此，您可以将before和after添加到父.content-main。使用相同的clip-path，这样可以省去麻烦，但不同的位置让效果看起来不错。

它不是最终版本，你可以再添加一个包装来隐藏溢出，或者你可以擦除旋转并以不同的方式定位它们（但是你必须改变多边形坐标，我不认为你想要那个）。但我认为这对你来说是一个非常好的开始。

＆＃13;

body {
  background-color: #eee;
  font-family: 'Roboto Slab';
  font-weight: 300;
  color: #333;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 20px;
}

p {
  line-height: 25px;
}

.content-main {
  position: relative;
  width: 400px;
  margin: 40px auto;
}
.content-main:before, .content-main:after {
  content: "";
  height: 2px;
  width: 100%;
  top: 0;
  position: absolute;
  transform: rotate(90deg);
  -webkit-clip-path: polygon(0% 0%, 5% 100%, 10% 0%, 15% 100%, 20% 0%, 25% 100%, 30% 0%, 35% 100%, 40% 0%, 45% 100%, 50% 0%, 55% 100%, 60% 0%, 65% 100%, 70% 0%, 75% 100%, 80% 0%, 85% 100%, 90% 0%, 95% 100%, 100% 0%);
}
.content-main:before {
  background-color: #eee;
  left: -50%;
}
.content-main:after {
  background-color: #fff;
  right: -50%;
}
.content-main .content-box {
  height: auto;
  overflow: hidden;
  padding: 20px;
  background: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
}
.content-main .content-box:before, .content-main .content-box:after {
  content: "";
  height: 2px;
  position: absolute;
  left: 0;
  right: 0;
  -webkit-clip-path: polygon(0% 0%, 5% 100%, 10% 0%, 15% 100%, 20% 0%, 25% 100%, 30% 0%, 35% 100%, 40% 0%, 45% 100%, 50% 0%, 55% 100%, 60% 0%, 65% 100%, 70% 0%, 75% 100%, 80% 0%, 85% 100%, 90% 0%, 95% 100%, 100% 0%);
}
.content-main .content-box:before {
  background-color: #eee;
  top: 0;
}
.content-main .content-box:after {
  background-color: #fff;
  bottom: -2px;
}

＆＃13;

<div class="content-main">
  <div class="content-box">
    <h2>Ripped Paper Effect</h2>
    <p>Enthusiastically leverage other's effective users via client-centric portals. Energistically promote principle-centered portals vis-a-vis virtual strategic theme areas. Assertively streamline premium alignments through focused total linkage.</p>
  </div>
</div>

＆＃13;

Answer 2

正如其他人提到的那样，他们在该div上的伪元素上使用了相同的剪辑路径，但是我们可以摆脱它们并使我们的剪辑路径剪切它自己的div。

body {
  background-color: #eee;
  font-family: 'Roboto Slab';
  font-weight: 300;
  color: #333;
  text-rendering: optimizeLegibility;
}

h2 {
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 20px;
}

p {
  line-height: 25px;
}

.content-main {
  position: relative;
  width: 400px;
  margin: 40px auto;
}

.content-main .content-box {
  height: auto;
  overflow: hidden;
  padding: 20px;
  background: #fff;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
  -webkit-clip-path: polygon(0% 0%, 5% 2%, 10% 0%, 15% 2%, 20% 0%, 25% 2%, 30% 0%, 35% 2%, 40% 0%, 45% 2%, 50% 0%, 55% 2%, 60% 0%, 65% 2%, 70% 0%, 75% 2%, 80% 0%, 85% 2%, 90% 0%, 95% 2%, 100% 0%, 98% 5%, 100% 10%, 98% 15%, 100% 20%, 98% 25%, 100% 30%, 98% 35%, 100% 40%, 98% 45%, 100% 50%, 98% 55%, 100% 60%, 98% 65%, 100% 70%, 98% 75%, 100% 80%, 98% 85%, 100% 90%, 98% 95%, 100% 100%, 95% 98%, 90% 100%, 85% 98%, 80% 100%, 75% 98%, 70% 100%, 65% 98%, 60% 100%, 55% 98%, 50% 100%, 45% 98%, 40% 100%, 35% 98%, 30% 100%, 25% 98%, 20% 100%, 15% 98%, 10% 100%, 5% 98%, 0% 100%, 2% 95%, 0% 90%, 2% 85%, 0% 80%, 2% 75%, 0% 70%, 2% 65%, 0% 60%, 2% 55%, 0% 50%, 2% 45%, 0% 40%, 2% 35%, 0% 30%, 2% 25%, 0% 20%, 2% 15%, 0% 10%, 2% 5%);
}

<div class="content-main">
  <div class="content-box">
    <h2>Ripped Paper Effect</h2>
    <p>Enthusiastically leverage other's effective users via client-centric portals. Energistically promote principle-centered portals vis-a-vis virtual strategic theme areas. Assertively streamline premium alignments through focused total linkage.</p>
  </div>
</div>

Answer 3

如何使用某些背景和radial-gradient具有相似的效果：

＆＃13;

body {
  background-color: #eee;
  font-family: 'Roboto Slab';
  font-weight: 300;
  color: #333;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h2 {
  font-weight: 400;
  font-size: 20px;
  margin-bottom: 20px;
}

p {
  line-height: 25px;
}

.content-main {
  position: relative;
  width: 400px;
  margin: 40px auto;
}
.content-main .content-box {
  height: auto;
  overflow: hidden;
  padding: 20px;
  background: 
  radial-gradient(circle at bottom, #fff 85%,transparent 0%)top /20px 20px repeat-x,
  radial-gradient(circle at top, #fff 85%,transparent 0%)bottom /20px 20px repeat-x,
  radial-gradient(circle at left, #fff 85%,transparent 0%)right /20px 20px repeat-y,
  radial-gradient(circle at right, #fff 85%,transparent 0%)left /20px 20px repeat-y,
  linear-gradient(#fff,#fff) center/calc(100% - 40px) calc(100% - 40px) no-repeat;
}

＆＃13;

<div class="content-main">
  <div class="content-box">
    <h2>Ripped Paper Effect</h2>
    <p>Enthusiastically leverage other's effective users via client-centric portals. Energistically promote principle-centered portals vis-a-vis virtual strategic theme areas. Assertively streamline premium alignments through focused total linkage.</p>
  </div>
</div>

＆＃13;

使用多边形的撕纸CSS效果

3 个答案: