Creating a rectangle with css and a 'triangle edge' - html

Question

Im trying to create a container with css that has a rectangle header with a 'triangle edge'.
Example:
chrome example
Or code here (css):
.bubble {
clear: both;
margin: 0px auto;
width: 350px;
background: #fff;
-moz-border-radius: 10px;
-khtml-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}
div#container {
margin: 50px auto 0px auto; /* centered */
padding-top:100px;
width: 400px;
}
.triangle {
height: 35px;
top: -20px;
width: 315px;
position: relative;
background: #D12738;
background: -moz-linear-gradient(top, rgba(209, 39, 56, 1) 0%, rgba(122, 23, 38, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(209, 39, 56, 1)), color-stop(100%,rgba(122, 23, 38, 1)));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d12738', endColorstr='#7a1726',GradientType=0 ), filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
.triangle::after {
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(35deg);
-o-transform: rotate(45deg);
background: none repeat scroll 0 0 white;
content: "";
height: 44px;
left: 302px;
position: absolute;
top: 2px;
width: 24px;
}
html:
<div id="container">
<div class="bubble">
<div class="triangle">test baa</div>
<p>sadsadsadsad dsdsa dsdsa ds dsadsd</p>
<p>sadsadsadsad dsdsa dsdsa ds dsadsd</p>
<p>sadsadsadsad dsdsa dsdsa ds dsadsd</p>
<p>sadsadsadsad dsdsa dsdsa ds dsadsd</p>
</div>
</div>
But the border on the right edge dissapears because of the white background. Is there any way to prevent this?
Any help appreciated!

Answer 1

You can't accomplish what you're trying to do by creating a triangle with that method, because by definition you're blocking out a piece of the rectangle with something that's also going to block out whatever else is behind it.
The way to accomplish what you want to accomplish is to create a triangle using a border. Here's a link and a fiddle to how you might accomplish this:
http://css-tricks.com/snippets/css/css-triangle/
http://jsfiddle.net/BNVHU/7/
Unfortunately, border gradients only work with webkit at this time, and don't seem to jibe with the border method of making triangles. I doubt that there's a way to do this with a gradient intact in all browsers. Might need an image.