Path/line 有角度 end/linecap

Question

我正在尝试创建一个形状，如附图中的白色形状。是否可以通过从 A 到 B 的单条线并以某种方式给两端一个角度来实现这一点？或者最简单的解决方案是使用路径来描绘边并填充形状？

Answer 1

倾斜变换将对直线执行此操作。

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>

Path/line with angled end/linecap