Ripped Paper CSS Effect using Polygon

css torn edge border
css paper effect
css polygon background
css clip-path curve
css clip-path wave
slanted div generator
css shapes generator
css clip-path tutorial

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.

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>

CSS Ripped Border Effect with clip-path, Uses CSS clip-path property to defined a polygon shape that simulate a ripped border effect. The border which I am wanting to know is one the edge of the wood and the paper. I need to know how to create i&hellip; I am wondering if someone knows how to create the border, which is in this

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>

Ripped Paper Effect, <h2>Ripped Paper Effect</h2>. 4. <p>Enthusiastically leverage other's effective users via client-centric portals. Energistically promote principle-centered portals  Here’s another cool effect using the same approach above, but making use of different transformations on the polygons (a slight scaling and rotation).

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>

Ripped Paper Effect, In this example below you will see how to do a Ripped Paper Effect with some href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,100,700' -​webkit-clip-path: polygon(0% 0%, 5% 100%, 10% 0%, 15% 100%, 20% 0%,  Ripped Paper CSS Effect using Polygon. 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.

Using CSS Clip Path to Create Interactive Effects, Did you glue them onto paper to create your own collages? in relative coordinates and outputs corresponding polygons using CSS clip-path . The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden.

Working with Shapes in Web Design, Here's an animated tutorial of how this works: How a CSS Triangle is Made Text can reflow over a shape such as a circle, ellipse or a polygon with the  How to Create CSS3 Paper Curls Without Images. By In this post, we’ll use a similar technique to create a CSS3 paper curl effect. Paper curls have been popular for a few years. The viewer

torn-paper.css, torn-paper.css — CSS stylesheet, 1 KB. File contents .letter { /*torn paper border*/ background-color: #f1f2f6; border-style: solid; border-width: 40px 40px 40px;  In this video we look at applying a "ripped paper edge" effect to the bottom of a module via background-image on an a pseudo element. Kind of a neat way to do it so the main element itself can have a solid background color we can match and let the page background bleed through the negative space in the SVG.

Comments