具有内联样式的 HTML 弧形扇区

Question

我想使用 HTML + CSS 绘制一个固定基数和长度(例如 30px 半径和 70% 长度)的弧形扇区。

到目前为止，我发现大多数解决方案是将两张图片与 position:absoulte 组合在一起。不幸的是，我的html代码将嵌入作为电子邮件模板发送出去，而且我发现Gmail不支持绝对位置。这也是我想使用内联样式而不是标题 css 的原因。

相关问题在这里: HTML5 / CSS3 Circle with Partial Border

我正在寻找的类似输出。 http://dabblet.com/gist/3949571

有什么帮助吗？

Answer 1

我会使用 SVG。

svg {
  width: 150px;
  height: 150px;
}
circle.inner {
  stroke: rebeccapurple;
  stroke-width: 3;
  stroke-dasharray: 39% 139%;
  stroke-dashoffset: 78%;
  fill: pink;
}

<svg viewbox="0 0 100 100">
  <circle class="inner" cx="40" cy="40" r="25" />

</svg>