title: Semi-transparent slanted background
body: <p>I want to create an html element, e.g. a div, which is styled as follows:</p>
  
  <ul>
  <li>semi-transparent background-color</li>
  <li>rounded borders on all edges</li>
  <li>left side of the div draws a straight line</li>
  <li>right side of the div draws a skewed line</li>
  </ul>
  
  <p>I'd like to create this in CSS only and wonder if this is possible. So far I came up with two different approaches which have their own drawbacks and are not fully sufficient. You can have a look at those in this fiddle:</p>
  
  <p><a href="https://jsfiddle.net/n4tecna3/">https://jsfiddle.net/n4tecna3/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.one-side-skew-1,
  .one-side-skew-2 {
    font-size: 20px;
    padding: 2%;
    background-color: rgba(220, 50, 255, 0.6);
    position: relative;
    display: block;
    border-radius: 4px;
    z-index: 2;
    color: #ffffff;
    margin-top: 30px;
  }
  .one-side-skew-2 {
    border-top-right-radius: 0px;
  }
  .one-side-skew-1:after {
    height: 100%;
    width: 20%;
    position: absolute;
    top: 0;
    left: 85%;
    display: inline-block;
    content: "";
    background-color: rgba(220, 50, 255, 0.6);
    -moz-transform: skewX(-10deg);
    -webkit-transform: skewX(-10deg);
    -ms-transform: skewX(-10deg);
    -o-transform: skewX(-10deg);
    transform: skewX(-10deg);
    z-index: -1;
    border-radius: 4px;
  }
  .one-side-skew-2:after {
    border-top: 1em solid rgba(220, 50, 255, 0.6);
    border-left: 0.25em solid rgba(220, 50, 255, 0.6);
    border-right: 0.25em solid transparent;
    border-bottom: 1em solid transparent;
    border-top-right-radius: 4px;
    left: 100%;
    display: inline-block;
    position: absolute;
    content: "";
    top: 0;
  }
  .container {
    width: 500px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="one-side-skew-1"&gt;
      &lt;span class="inner-text"&gt;One Side Skew With Pseudo Element Skewed&lt;/span&gt;
    &lt;/div&gt;
  
    &lt;div class="one-side-skew-2"&gt;
      &lt;span class="inner-text"&gt;One Side Skew With Pseudo Element Border&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Approach 1 <code>.one-side-skew-1</code>  uses a div element with round borders and a skewed, round-bordered pseudo element to create a one-side skewed element in sum. This works great as long as the background-color is solid. For semi-transparent backgrounds you will see an ugly color overlap where the element and its pseudo-element meet.</p>
  
  <p>Approach 2 <code>.one-side-skew2</code> uses a div element with a pseudo behind it that consists of borders only. It's somewhat hacky but gets close to my desired result. Still, the right does not look nearly as smooth as in the first approach. </p>
  
  <p>Does someone else have a good solution for this problem in CSS only? Or will I have to use a fallback solution with a semi-transparent background-image to solve this?</p>