title: Html over background margins
body: <p>I currently have a rhombus as a image on my display.
  I'm trying to get text to show over it, but amy html I put in goes to the bottom of the image.</p>
  
  <p>Is there a way to get my html to show on/in the rhombus?
      `</p>
  
  <pre><code>    .rhomb {
           -webkit-box-sizing: content-box;
           -moz-box-sizing: content-box;
            box-sizing: content-box;
            width: 80px;
            height: 80px;
            margin: 250px 130px 0 450px;
            padding: 180px;
            border: none;
            font: normal 100%/normal Arial, Helvetica, sans-serif;
            color: yellow;
            -o-text-overflow: clip;
            text-overflow: clip;
            background: #1abc9c;
            -webkit-transform: rotateZ(-45deg)   ;
            transform: rotateZ(-45deg)   ;
            -webkit-transform-origin: 0 100% 0deg;
            transform-origin: 0 100% 0deg;
  }
  </code></pre>