Semi-transparent slanted background

Question

I want to create an html element, e.g. a div, which is styled as follows:

• semi-transparent background-color
• rounded borders on all edges
• left side of the div draws a straight line
• right side of the div draws a skewed line

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:

https://jsfiddle.net/n4tecna3/

.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;
}

<div class="container">
  <div class="one-side-skew-1">
    <span class="inner-text">One Side Skew With Pseudo Element Skewed</span>
  </div>

  <div class="one-side-skew-2">
    <span class="inner-text">One Side Skew With Pseudo Element Border</span>
  </div>
</div>

Approach 1 .one-side-skew-1 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.

Approach 2 .one-side-skew2 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.

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?

Answer 1

You can use a pseudo element for all the background and hide the overflowing parts with the overflow property on the element.

This will prevent element and pseudo element background overlapping and allow semi transparent backgrounds:

div {
  position: relative;
  width: 250px;
  font-size: 20px;
  border-radius: 4px;
  overflow: hidden;
  color: #fff;
  padding: 1% 2%;
}
div:before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 100%; height: 100%;
  background: rgba(220, 50, 255, 0.6);
  -webkit-transform-origin:100% 0;
  -ms-transform-origin:100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skewX(-10deg);
  -ms-transform: skewX(-10deg);
  transform: skewX(-10deg);
  border-radius: 4px 4px 6px;
  z-index: -1;
}


/** FOR THE DEMO **/body {background: url('http://lorempixel.com/output/people-q-g-640-480-3.jpg');background-size: cover;}

<div>content</div>