Ripped Paper CSS Effect using Polygon - css

Question

I am trying to generate a box with ripped paper effect.So far I have tried and have found only this link to code pen which achieves partially what I am trying to do: https://codepen.io/dsm-webdsigner/pen/dYBRYw
What is missing is I need to achieve that paper effect on the all 4 sides of the paper. As far as I understand, it is achieved using clip-path proper and polygon() function of CSS.
-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%);
Can anyone help me figure out how to achieve those effect on all 4 sides? Thanks in advance.

Answer 1

Well it's only top and bottom because in that example there are only 2 elements used before and after on the .content-box. You need another 2 elements to have left and right 'ripple' effect.
For that, you can add before and after to the parent .content-main. Use the same clip-path so it saves you the trouble but position them differently so the effect looks nice.
It's not the final version, you can add one more wrapper for overflow hidden or you can erase the rotate and position them differently ( but then you have to change the polygon coordonates and i don't think you want that ). But i think it's a very good start for you.
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

What about using some background and radial-gradient to have as similar effect:
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>

Answer 3

As other mentioned they're using the same clip path on the pseudo-elements on that div, however we can get rid of those and have our clip-path that clips the div it self.
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>