JSFiddle - React, Tailwind, and code Playground

HTML

<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>

CSS

.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;
        /* border-bottom-left-radius: 10px; */
        /* border-top-left-radius: 10px; */
         /* border-bottom-right-radius: 10px; */
		left: 100%;
		display: inline-block;
		position: absolute;
		content:"";
		top: 0;
    
	}



.container{
     width: 500px;
    
}