72484

jagged edges with transparant background in CSS

Question:

<a href="https://stackoverflow.com/questions/18972888/make-a-divs-top-and-bottom-border-have-a-jagged-edge" rel="nofollow">Make a divs top and bottom border have a jagged edge</a>

Based on the answer of @ᴀʀᴜn BᴇrtiL I was able to create something.

The problem is it doensn't look good, I can't get rid of the background color. Using no shadow is an option, but using a static single-color background is not. So how do I make it transparent?

<img alt="" class="b-lazy" data-src="https://i.stack.imgur.com/ZB0hw.jpg" data-original="https://i.stack.imgur.com/ZB0hw.jpg" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

Or is there another way? I know CSS3 can use images in the border, but I prefer CSS-code without images.

Answer1:

There are several ways to achieve this (including JS and SVG solutions). However I think the easiest solution using pure CSS is using some pseudo-elements (to render the jagged edges) in combination with linear-gradient and multi-backgrounds feature. Here is the demo code:

div { width:200px; height:250px; background:white; position:relative; margin-top:25px; } div:before, div:after { content:''; width:100%; height:5px; position:absolute; bottom:100%; left:0; background-image: linear-gradient(135deg, transparent 66%, white 67%), linear-gradient(45deg, white 33%, gray 34%, transparent 44%); background-position: -5px 0; background-size: 10px 100%; background-repeat:repeat-x; } div:after { top:100%; bottom:auto; background-image: linear-gradient(135deg, white 33%, gray 34%, transparent 44%), linear-gradient(45deg, transparent 66%, white 67%); } body { background:url(http://placekitten.com/800/600); } <h2><a href="http://jsfiddle.net/viphalongpro/z6uRW/1/" rel="nofollow">Demo.</a></h2>

Recommend

  • CSS/XHTML Menu - Working in all browsers - IE6 Help
  • CSS border-image - critical
  • Is there any way to center certain columns in table?
  • Creating interactive SVG maps for a web portal
  • Variant from android-autofittextview library : scaling makes strange behaviour
  • removing the default blue color on focus
  • Using multiple input pipelines in TensorFlow
  • d3.js selection conditional rendering
  • in batch how do i use taskkill properly
  • react split panel resize
  • Local Development, Apache vs Developer - file permissions
  • How to rotate the dial in a gauge chart? Using python plotly
  • how to populate a SQLite database and use that database in phonegap?
  • Creating a DropDownList
  • Find group of records that match multiple values
  • AndEngine Applying Transparancy to AndEngine View
  • Authentication in Play! and RestEasy
  • Adjust width of select element according to selected option's width
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • How to match http request and response using Jersey ContainerRequestFilter and ContainerResponseFilt
  • HTTP/2 streams vs HTTP/1.1 connections
  • Google Custom Search with transparent background
  • Syntax for setting draggablecursor property in google maps api
  • CSS Linear-gradient formatting issue accross different browsers
  • Sails.js/waterline: Executing waterline queries in toJSON function of a model?
  • Modifying destination and filename of gulp-svg-sprite
  • sending/ receiving email in Java
  • Redux, normalised entities and lodash merge
  • Do create extension work in single-user mode in postgres?
  • GridView Sorting works once only
  • How to get icons for entities from eclipse?
  • How to delete a row from a dynamic generate table using jquery?
  • Proper way to use connect-multiparty with express.js?
  • Acquiring multiple attributes from .xml file in c#
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Change div Background jquery
  • How can I remove ASP.NET Designer.cs files?
  • Checking variable from a different class in C#
  • java string with new operator and a literal