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

一个DIV内的CSS三角形和框

1 个答案:

DEMO