一个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;
}

DEMO