Полу-прозрачные раскосые фоне

Я хочу создать html-элемент, например div, который имеет следующий стиль:

• полупрозрачный фон-цвет
• закругленные границы на всех ребрах
• левая сторона div рисует прямую линию
• правая сторона div рисует кривую линию

Я хотел бы создать это только в CSS и задаться вопросом, возможно ли это. До сих пор я пришел к двум различным подходам, которые имеют свои недостатки и не являются полностью достаточными. Вы можете взглянуть на те, кто в этой скрипке:

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>

Подход 1 .one-side-skew-1 использует div-элемент с круглыми границами и скошенный псевдо-элемент с круглыми границами для создания одностороннего скошенного элемента в сумме. Это прекрасно работает до тех пор, пока цвет фона является сплошным. Для полупрозрачных фонов вы увидите уродливое цветовое наложение там, где элемент и его псевдо-элемент встречаются.

Подход 2 .one-side-skew2 использует элемент div с псевдо за ним, что состоит только из границ. Это несколько банально, но приближается к моему желаемому результату. Тем не менее, правый не выглядит почти так же гладко, как в первом приближении.

Есть ли у кого-то еще хорошее решение этой проблемы только в CSS? Или мне придется использовать запасное решение с полупрозрачным фоновым изображением, чтобы решить эту проблему?