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

Question

有什么方法可以将用 CSS 创建的三 Angular 形和框合并到一个中吗 <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