title: css shapes with text inside it
body: <p>I need to create this kinda shape in the image below which contains text in it. 
  <a href="https://i.stack.imgur.com/qOAil.png" rel="noreferrer"><img src="https://i.stack.imgur.com/qOAil.png" alt="enter image description here"></a></p>
  
  <p>This is how I tried : </p>
  
  <p>HTML</p>
  
  <pre><code>        &lt;div class="header-bottom"&gt;
  
              &lt;div class="blue-rectangle"&gt;
                  &lt;p&gt;sadasdasdasd&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="blue-rectangle"&gt;
                  &lt;p&gt;dsasdasdasda&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.header-bottom{
  position: absolute;
  right:13%;
  bottom:5%;
  }
  
  .blue-rectangle {
  background-color: rgba(3,78,136,0.7);
  padding: 10px 20px 10px 200px;
  margin-bottom: 20px;
  }
  
  .blue-rectangle p{
  color:white;
  text-transform: uppercase;
  font-size:18px;
  }
  </code></pre>
  
  <p>i tried adding transform:skew but it skews both right, left and the text itself. </p>