html - Adding chamfer to box using CSS3 -

I am creating a project website for our compound, and at the moment I create news-feed for landing page I am here.

Previously, news-feed boxes (divided into three boxes / rows) were just real text; Now it includes both text and images. First, I could just use CSS gradient to create the requested effect. The problem is that I can not seem to work with this image-background properly.

I have tried to solve the problem using image boundaries, but it is not working due to the fact that it needs to be transparent, so it matches the body background but Still cover image background.

My question is as it is: Can I make the requested cell effect on the news-feed box, never work - what is the background of the body or if it is an image / real text?

Please understand jsfiddle to understand what the effects of the first text box are and what I have to do with another image / text box;

Background: Linear-gradient (135 degrees, transparent 20px, # 333333 0) top left, linear-gradient (0deg, transparent 0px, # 333333 0) Bottom right, Linear shield (0deg, Transparent 0 px, # 333333 0) Bottom right, Linear shield (0deg, Transparent 0 px, # 333333 0) Bottom left;

Thanks, Tommy

Here's the way to CSS.

  Background: # c00; / * Fallback * / background: -move-linear-gradient (45 degrees, transparent 15px, # c00 10px), -move-linear-shield (135 degree, transparent 15px, # c00 10px), -move-linear-gradient ( 225 degrees, transparent 15px, # c00 10px), -move-linear-gradient (315 degrees, transparent 15px, # c00 10px); Background: -O-linear-gradient (45 degrees, transparent 15px, # c00 10px), -o-linear-gradient (135 degree, transparent 15px, # c00 10px), -o-linear shield (225deg, transparent 15px, # C00 10px), -o-linear-gradient (315 degrees, transparent 15px, # c00 10px); Background: -WebKit-linear-gradient (45 degree, transparent 15px, # c00 10px), -webkit-linear-gradient (135deg, transparent 15px, # c00 10px), -webkit-linear-gradient (225deg, transparent 15px, #) C00 10px), -webkit-linear-shield (315 degree, transparent 15px, # c00 10px); }