79727

css3 jagged edge with transparent bg

I am trying to have jagged edges made in css3 on a div that is on an image and I need it to have a transparent bg, by bg I meant where the jagged edges are

See the following fiddle: http://jsfiddle.net/ovb597yq/

<div style="background: linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px, linear- gradient(135deg, #ec173a 5px, #fff 0) 0 5px; background-color: #ec173a; background-position: right top; background-repeat: repeat-y; background-size: 10px 10px;width:200px;height:200px;">test</div>

.

body{ background-image:url("http://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg"); }

Where its white I am trying to make it transparent but its not currently happening

Any ideas?

Answer1:

You need to apply it on :after :pseudo-element and change #fff to transparent.

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

body {
  background-image: url("http://upload.wikimedia.org/wikipedia/commons/1/10/20090529_Great_Wall_8185.jpg");
}
div {
  position: relative;
  background-color: #ec173a;
  width: 200px;
  height: 200px;
}
div:after {
  content: '';
  position: absolute;
  background: linear-gradient(45deg, #ec173a 5px, transparent 0) 0 5px, linear-gradient(135deg, #ec173a 5px, transparent 0) 0 5px;
  background-position: right top;
  background-repeat: repeat-y;
  background-size: 10px 10px;
  width: 10px;
  height: 100%;
  right: -10px;
}
<div>test</div>


Recommend

  • How to hover over one element and apply animation effects to a different one
  • Trapezoid Sections, Clipping Background Images
  • Why css rotate messes up child's skew
  • How stop keyframe Animation exactly after 1 second without to use setTimeout ? - Problem events on q
  • Change size of arrows using matplotlib quiver
  • Camera-Offset | Project Tango
  • Gauge D3, display values positions
  • CSS3 1px diagonal lines gradient
  • How to “round” a 2D Vector to nearest 15 degrees
  • Draggable progressbar
  • Javascript event, the parameter “e” , “event” or other
  • How do I rotate a map marker in angular-leaflet-directive?
  • Draw cross background up/down via css which is responsive
  • How to draw cross background via css which is responsive
  • Advice on how to create this button shape
  • date: illegal option — d, Find difference between two dates
  • Selectively hide background elements when overlayed with transparent div
  • is it possible to insert a line break in this tooltip?
  • Cut the background to expose the layer below
  • How to create a 2D image by rotating 1D vector of numbers around its center element?
  • quiver not drawing arrows just lots of blue, matlab
  • Blackberry - Custom EditField Cursor
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Google Custom Search with transparent background
  • Android fill_parent issue
  • Algorithm for a smudge tool?
  • Body moving without any force applied? (Box2d)
  • Repeat a vertical line on every page in Report Builder / SSRS
  • CSS Linear-gradient formatting issue accross different browsers
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • How reduce the height of an mschart by breaking up the y-axis
  • How to draw moving and Running sine wave chart using JFree chart in java?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • jquery mobile loadPage not working
  • Unanticipated behavior
  • Android Google Maps API OnLocationChanged only called once
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • java string with new operator and a literal