Get a transparent image with page shading to work with a solid background color
I have a small png with a transparent area. I want to act like the bottom right corner of a solid color div, but I can't think of an elegant way to do this with css.
my current css:
div.example {
border-radius: 9px;
background-color: #fff;
background-image: url(bottom-right-corner-peel.png);
background-repeat: no-repeat;
background-position: right bottom;
}
The problem with the above code is that the background color of the div ( #fff
) is displayed through the transparent part of the png, ruining the effect. I can think of a couple of extremely hacky approaches to fix this (for example, creating another div (or using ::after
) to place an element below the div in the question, and using some tricks to make this work, but there must be a better way, right?
Viewing the [modified] demo:
source to share
Here is the solution to your problem: http://jsfiddle.net/promatik/uZFpZ/
I added #content-bottom
next to #content
:
<div id="content">
<h1>Corner Peel Demo</h1>
</div>
<div id="content-bottom">
<div id="content-space"></div>
<div id="content-corner"></div>
</div>
And added this to the CSS:
div#content{
...
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
div#content-bottom {
height: 30px;
position: relative;
}
div#content-space {
height: 27px;
border-bottom-left-radius: 9px;
background-color: #fff;
margin-right: 42px;
}
div#content-corner {
position: absolute;
top: 0px;
right: 0px;
height: 27px;
width: 42px;
background-color: transparent;
background-image: url(data:image/png;base64,...');
}
source to share
My ideas are to use png to hide the entire corner of the div. Let's say your png is 40x40px and the top left is white and the bottom is transparent. you can use
border-bottom-right-radius: 40px;
"cut off" the corner of the div. Therefore, you see the background image. Now you put your png over it to hide the ugly round corner.
http://jsfiddle.net/Xd8CD/ (need a better png ...)
source to share