一种方法是，如下所示，将CSS radial-gradient()用作background-image，并在代码中添加解释性注解：

/* defining a shared CSS custom property: */
:root {
  --spacing: 0.5rem;
}

/* a simple means of ensuring common cross-browser sizing
   of elements, to include the width and padding within
   the declared sizes; also to remove browser default
   padding and margins: */
*,
::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  block-size: 100vh;
  font-family: system-ui;
  font-size: 16px;
  font-weight: 400;
  padding: var(--spacing);
}

main {
  border: 1px solid currentColor;
  inline-size: clamp(30rem, 80%, 1200px);
  margin-inline: auto;
  min-block-size: 100%;
  padding: var(--spacing);
}

.container {
  /* defining custom properties for the .container elements,
     and any descendant elements: */
  /* the desired background-color */
  --backgroundColor: crimson;
  /* the distance between the center of the gradient and the
     point at which the color should begin: */
  --transparentRadius: 1rem;
  /* the horizontal radius of the ellipse */
  --rx: 0.5rem;
  /* the vertical radius of the ellipse: */
  --ry: 30%;
  background-image:
    radial-gradient(
      /* specifying the ellipse (as opposed to 'circle'), with
         a horizontal diameter of two times the radius,
         similarly defining the vertical radius: */
      ellipse calc(2 * var(--rx)) calc(var(--ry) * 2)
        /* positioning the center of the gradient at the horizontal
           point of 100% - 50% of the radius, and vertically at
           50% of the element's size on the y-axis: */
        at calc(100% - (0.5 * var(--rx))) 50%,
        /* setting the start color of the radius (transparent, by default)
           which runs from 0 (the center) to a point --transparentRadius
           distance from the center: */
        transparent 0 var(--transparentRadius),
        /* setting the second color - the faux 'background-color' - of
           the element, starting at the --transparentRadius distance
           and continuing to fill the element: */
        var(--backgroundColor) var(--transparentRadius)
      );
  inline-size: 15rem;
  margin-block: 2rem;
  padding: var(--spacing);
  /* copied from your own code: */
  transform: matrix(1, -0.03, 0.03, 1, 0, 0);
}

.container p {
  /* setting a margin to the inline end of the <p> element,
     to ensure that the text of the element doesn't cross
     into the transparent area: */
  margin-inline-end: calc(var(--spacing) + var(--rx));
}

<main>
  <div class="container" style="--backgroundColor: lightpink">
    <p>Long text Long text Long text Long text Long text</p>
  </div>

  <div class="container">
    <p>Short text</p>
  </div>
</main>

JS Fiddle demo。
参考文献：

• calc()。
• CSS custom properties。
• CSS logical properties。
• radial-gradient()。
• var()。

参考文献：

• “Using CSS Gradients，”Mozilla开发者网络。