CODEWITHSUNDEEP
htmlcss
Kyrbi
Kyrbi

Reputation: 2250

CSS triangle and box inside one DIV

is there any way to merge triangle and box created with CSS into the one <div>. For now I have got this HTML:

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

And this in 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;
}

And this is result http://jsfiddle.net/9AyYS/ .

Is there any way to simiplify it into the one <div>? Thank you.

Upvotes: 1

Views: 5728

Answers (1)

Martin Turjak
Martin Turjak

Reputation: 21214

Ok, upon your convincing I moved this here from the comment above =)

The slight modification to Mira's code:

#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

Upvotes: 7

Related Questions