CSS triangles cut out - css

Question

I have a box with a triangle that intersects it and I'd like a similar triangle to be cut out from the box so there is a white gap between the two. As this is a little hard to explain I created a jsFiddle here that shows what I have already.
Here is a screenshot
HTML
<div id="alertdetails">
<h2>UH OH</h2>
Date: 05/11/2012 15:57:46
<br><br>
View
</div>
<div id="arrow-right"></div>
​
CSS
#alertdetails {
background-color: #F8F8F8;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
left: 25px;
padding: 20px;
position: absolute;
text-shadow: 0 1px #FFFFFF;
top: 15px;
}
#arrow-right {
position: absolute;
top: 45px;
left: 15px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #303030;
}
​

Answer 1

You can do this without the extra DIV for the arrow by using a UTF-8 "right arrow" and the :before pseudo class. This will give you a little more control over the style of the arrow.
#alertdetails {
background-color: #F8F8F8;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
left: 25px;
padding: 20px;
position: relative;
margin-top:15px;
text-shadow: 0 1px #FFFFFF;
}
#alertdetails::before {
content:"\25b6";
position:absolute;
top:20px;
left:-20px;
font-size:60px;
color:#ffffff;
}

Answer 2

You just need to add a second triangle that is slightly bigger.
HTML
<div id="alertdetails">
<h2>UH OH</h2>
Date: 05/11/2012 15:57:46
<br><br>
View
</div>
<div id="arrow-white"></div>
<div id="arrow-right"></div>
CSS
#alertdetails {
background-color: #F8F8F8;
border: 1px solid #CCCCCC;
border-radius: 5px 5px 5px 5px;
left: 25px;
padding: 20px;
position: absolute;
text-shadow: 0 1px #FFFFFF;
top: 15px;
}
#arrow-right {
position: absolute;
top: 45px;
left: 15px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid #303030;
}
#arrow-white{
position: absolute;
top: 44px;
left: 15px;
width: 0;
height: 0;
border-top: 21px solid transparent;
border-bottom: 21px solid transparent;
border-left: 22px solid #ffffff;
}