css - 使用多边形撕纸 CSS 效果

Question

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

缺少的是我需要在纸张的所有 4 个面上实现纸张效果。据我了解，它是使用 clip-path proper 和 CSS 的 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 个元素来产生左右“波纹”效果。

为此，您可以将 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>