I am trying to create a shape like the white shape in the attached image. Would it be possible to achieve this with a single line from A to B, and somehow giving the ends an angle? Or would the easiest solution be to use a path to trace the sides and fill the shape?

CodePudding user response：

A skew transform will do that to a straight line.

html, body {
  width: 100%;
  height: 100%;
}

<svg width="100%" height="100%">
  <line stroke-width="5" stroke="red" transform="scale(3) translate(35,3) skewX(-30)" y2="50"/>
</svg>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>