I am trying to create an HTML element that needs to be responsive and cannot be an SVG. The element should resize when the text content inside breaks onto a new line. I have already skewed the element slightly, but now I need to add a rounded side on the right.
https://i.sstatic.net/KKl1S.png
My attempts using the ::after pseudo-element have not been successful in creating the desired effect. I've tried various approaches, but I can't seem to get it quite right.
Below is one of my attempts at solving the issue:
body {
width: 200px;
}
.container {
background-color: red;
transform: matrix(1, -0.03, 0.03, 1, 0, 0);
padding: 0px 15px;
position: relative;
}
.container::after {
content: '';
background: white;
width: 10px;
height: 100%;
position: absolute;
right: -5px;
top: 0;
z-index: 2;
}<div class="container">
<p>Long text Long text Long text Long text Long text</p>
</div>
<div class="container">
<p>Short text</p>
</div>Any assistance would be greatly appreciated.