撕纸 CSS 使用多边形的效果

Question

我正在尝试生成一个带有撕纸的盒子 effect.So 到目前为止，我已经尝试过并且只找到了这个 link 来编码笔，它部分地实现了我想要做的事情：https://codepen.io/dsm-webdsigner/pen/dYBRYw

缺少的是我需要在纸张的所有 4 个面上实现纸张效果。据我了解，它是使用 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

嗯，它只是顶部和底部，因为在该示例中，.content-box 上只使用了 2 个元素 before 和 after。您需要另外 2 个元素才能具有左右 'ripple' 效果。

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

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

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;
}

<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 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 来达到类似的效果：

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;
}

<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>

撕纸 CSS 使用多边形的效果

Ripped Paper CSS Effect using Polygon

css

clip-path