title: css div containers with irregular shapes
body: <p>Hi,</p>
  
  <p>I am aware that it is possible to achieve all kind of shapes with CSS but I havent found an example that allows you to actually put content INSIDE which is READABLE as well. I want to make a div that looks like a trapezoid and put some text in it like this:</p>
  
  <pre><code>#trapezoid {
    border-left: 25px solid transparent;
    border-radius: 10px;
    border-right: 25px solid transparent;
    border-top: 100px solid rgba(114, 230, 245, 0.3);
    height: 0;
    width: 100px;
  }
  </code></pre>
  
  <p>this code draws the trapezoid but I cant put anything inside the trapezoid because everything goes below the actual shape. How should I do it?</p>
  
  <p>Thank you.</p>