title: How to create a box with slanted edges?
body: <p>I'm trying to make a <code>div</code> box with slanted edges but I just can't seem to manage it.</p>
  
  <p>This is what im trying to get:</p>
  
  <p><a href="https://i.stack.imgur.com/HlQgX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HlQgX.png" alt="example"></a></p>
  
  <p>This with a colored (non solid) background.</p>
  
  <p>Current CSS:</p>
  
  <pre><code>        .infotop {
              display: inline-block;
              min-width: 30%;
              min-height: 10%;
              max-width: 50%;
              margin: auto;
              background-color: rgba(0, 190, 190, 0.6);
              color: white;
              text-align: center;
              padding: 10px;
              padding-left: 30px;
              padding-right: 30px;
              box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.2), 0 16px 60px 0 rgba(0, 0, 0, 0.19);
              text-shadow: 2px 2px 4px #000000;
          }
  </code></pre>