how to get transparent for the div? - css

Question

Does CSS gives any option to show background image at the corner a transparent.
instead of showing white background in (DEMO)
avoid white area
#octagon {
width: 100px;
height: 100px;
background: red;
position: relative;
margin: 50px auto 0;
}
#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid red;
border-right: 29px solid #eee;
width: 42px;
height: 0;
}
http://jsfiddle.net/L8JUJ/4/

Answer 1

Working Fiddle
Made small changes and adjustments in margins.
CSS:
body{
background: url(http://placehold.it/350x150&text=FooBar1) repeat;
}
#octagon {
width: 100px;
height: 71px;
background: red;
position: relative;
margin: 99px 10px 0px 100px;
}
#octagon:before {
content: "";
position: absolute;
top: -29px;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid red;
border-right: 29px solid transparent;
width: 42px;
height: 0;
}

Answer 2

#octagon:before {
content: "";
position: absolute;
top: 0;
left: 0;
border-bottom: 29px solid red;
border-left: 29px solid red;
border-right: 29px solid #eee;
width: 42px;
height: 0;
opacity:0.6;
}

Answer 3

For a transparent border you can modify #octagon:before border-right with
border-right: 29px solid rgba(0,0,0,0.5);
That will not give you the effect you want because in the back there is the element that already has a background color, so the only way to do this and work would be to add some js to your code, such as:
http://jquery.malsup.com/corner/