title: CSS triangle and box inside one DIV
body: <p>is there any way to merge triangle and box created with CSS into the one <code>&lt;div&gt;</code>. For now I have got this HTML:</p>
  
  <pre><code>&lt;div id="triangle-left"&gt;&lt;/div&gt;
  &lt;div id="box"&gt;&lt;!-- Something --&gt;&lt;/div&gt;
  </code></pre>
  
  <p>And this in CSS:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>And this is result <a href="http://jsfiddle.net/9AyYS/" rel="nofollow">http://jsfiddle.net/9AyYS/</a> . </p>
  
  <p>Is there any way to simiplify it into the one <code>&lt;div&gt;</code>? Thank you.</p>