html - 一个 DIV 内的 CSS 三角形和框

Question

有没有办法将使用 CSS 创建的三角形和框合并到一个<div>. 现在我得到了这个 HTML：

<div id="triangle-left"></div>
<div id="box"><!-- Something --></div>

这在 CSS 中：

#triangle-left {
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-right: 30px solid #602F4F;
    border-bottom: 30px solid transparent;
    float:left;
}
#box {
    background-color: #602F4F;
    height: 50px;
    width: 200px;
    float:left;
    text-align: right;
    padding: 5px;
    margin-bottom: 4px;
    color: white;
    font-family: "Century Gothic", "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, sans-serif;
}

这是结果http://jsfiddle.net/9AyYS/。

有没有办法把它简化成一个<div>？谢谢你。

Answer 1

好的，在你说服我把这个从上面的评论移到这里=）

对 Mira 的代码稍作修改：

#box:before {
    content:"";
    position:absolute;
    top:0;
    right:210px;
    width: 0;
    height: 0;
    border-top: 30px solid transparent;
    border-right: 30px solid #602F4F;
    border-bottom: 30px solid transparent;
}
#box {
    background-color: #602F4F;
    height: 50px;
    width: 200px;
    position:relative;
    float:left;
    text-align: right;
    padding: 5px;
    margin:0 0 4px 30px;
    color: white;
    font-family: "Century Gothic", "Apple Gothic", AppleGothic, "URW Gothic L", "Avant Garde", Futura, sans-serif;
}

演示