Create torn edges in CSS

Question

I am currently using images and I would like to know if there is any css library / way to generate these dangling edges

Larger view: (using png for the top and bottom of the content) [ http://i.imgur.com/LgyNSOJ.png] [1]

thanks!

edit: I noticed that there was a vote to close this issue, but I would like to leave it open until the end of the day if more solns are provided.

Answer 1

You can use svg filter to get a similar effect.

 body { background: tan; } svg { position: relative; width: 500px; left: 50%; transform: translateX(-50%); } p { color: peru; padding: 45px; } 

 <svg width="500" height="500"> <defs> <filter id="filter" height="1.4" width="1.4"> <feTurbulence baseFrequency="0.12" numOctaves="2" type="fractalNoise" result="result1" /> <feDisplacementMap in2="result1" scale="99" result="result2" xChannelSelector="R" in="SourceGraphic" /> <feComposite in2="result2" in="SourceGraphic" operator="atop" result="fbSourceGraphic" /> </filter> </defs> <rect fill="saddlebrown" filter="url(#filter)" width="500" height="500" x="0" y="0" /> <foreignObject width="500" height="500"> <div> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br /> <br />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p> </div> </foreignObject> </svg> 

Answer 2

This is only possible with images and is great for images. If this is the extra horizons of the image you're worried about, it's easy to embed it in your CSS so that it is concise and quick. You can use any type of image that you prefer for the actual image. For this specific purpose, PNG or SVG are the most likely candidates (PNG is actually easier to draw).

Read this article about embedding images in data URIs in your CSS .

Here is a good online tool to create date URIs .

Answer 3

I would use SVG. You can easily get these exact shapes in Illustrator / Sketch and export the SVG file.

Answer 4

I believe that everything has passed since it was originally published in 2014. Now is the year 2017, and I used CSS to create the look of the rough / ragged edges. See sample code here. I’m sure that with more work I could make it more convincing ... but I like the results that give me my goals.

 clip-path: polygon(3% 0, 7% 1%, 11% 0%, 16% 2%, 20% 0, 23% 2%, 28% 2%, 32% 1%, 35% 1%, 39% 3%, 41% 1%, 45% 0%, 47% 2%, 50% 2%, 53% 0, 58% 2%, 60% 2%, 63% 1%, 65% 0%, 67% 2%, 69% 2%, 73% 1%, 76% 1%, 79% 0, 82% 1%, 85% 0, 87% 1%, 89% 0, 92% 1%, 96% 0, 98% 3%, 99% 3%, 99% 6%, 100% 11%, 98% 15%, 100% 21%, 99% 28%, 100% 32%, 99% 35%, 99% 40%, 100% 43%, 99% 48%, 100% 53%, 100% 57%, 99% 60%, 100% 64%, 100% 68%, 99% 72%, 100% 75%, 100% 79%, 99% 83%, 100% 86%, 100% 90%, 99% 94%, 99% 98%, 95% 99%, 92% 99%, 89% 100%, 86% 99%, 83% 100%, 77% 99%, 72% 100%, 66% 98%, 62% 100%, 59% 99%, 54% 99%, 49% 100%, 46% 98%, 43% 100%, 40% 98%, 38% 100%, 35% 99%, 31% 100%, 28% 99%, 25% 99%, 22% 100%, 19% 99%, 16% 100%, 13% 99%, 10% 99%, 7% 100%, 4% 99%, 2% 97%, 1% 97%, 0% 94%, 1% 89%, 0% 84%, 1% 81%, 0 76%, 0 71%, 1% 66%, 0% 64%, 0% 61%, 0% 59%, 1% 54%, 0% 49%, 1% 45%, 0% 40%, 1% 37%, 0% 34%, 1% 29%, 0% 23%, 2% 20%, 1% 17%, 1% 13%, 0 10%, 1% 6%, 1% 3%);