The illusion of it is possible: http://jsfiddle.net/2hCrw/4/
Tested with: IE 9, 10, Firefox, Chrome, Safari on PC and iPad.
::before
and ::after
pseudo elements are skewed to provide a side of the triangle each.
- Wrapper used for clipping skewed pseudo elements. You may be able to avoid this by using your outer container as the wrapper.
- Elements can still be styled with borders, shadows, etc.
- Anything underneath will show through properly.
Demo with borders and drop shadow: http://jsfiddle.net/2hCrw/8/
This demo also adds a tweak for iPad with Retina to prevent a gap between the element and the pseudo elements (either caused by drop shadow bleed or sub-pixel rendering behavior).
<div id="wrapper">
<div id="test">test</div>
</div>
#wrapper {
overflow: hidden;
height: 116px;
}
#test {
height: 100px;
background-color: #ccc;
position: relative;
}
#test::before {
content:"";
position: absolute;
left: -8px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(-40deg);
-moz-transform: skew(-40deg);
-o-transform: skew(-40deg);
-ms-transform: skew(-40deg);
transform: skew(-40deg);
}
#test::after {
content:"";
position: absolute;
right: -8px;
width: 50%;
height: 16px;
top: 100px;
background-color: #ccc;
-webkit-transform: skew(40deg);
-moz-transform: skew(40deg);
-o-transform: skew(40deg);
-ms-transform: skew(40deg);
transform: skew(40deg);
}
As an alternative, you can use a transparent image and "extend" the element above it with pseudo elements. I have answered a similar question regarding a circle cut from an element and show support options down to IE7 (as well as future options for true clipping/masking in CSS).
z-index
an option in your particular case?<div>
where the background behind the<div>
shows through, if you see what I mean.shape
it and set background for it, like it's in thediv
shape
it”, what do you mean?