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

【问题标题】：HTML arc sector with inline style具有内联样式的 HTML 弧形扇区
【发布时间】：2016-04-15 03:23:31
【问题描述】：

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

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

这里的相关问题： HTML5 / CSS3 Circle with Partial Border

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

有什么帮助吗？

【问题讨论】：

标签： html css css-shapes

【解决方案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>

【讨论】：

感谢您的回答。但是，我不清楚如何设置值来修改弧长。你介意用一个例子进一步解释一下吗？（例如如何设置弧度为 70）

【解决方案2】：

您可以使用透明边框和嵌入阴影来绘制背景颜色：

/*demo*/
div {
  display:flex;
  align-items:center;
  justify-content:center;/* center content not text */
  text-align:center; 
  }

<div style="
            box-sizing:border-box;
            padding:1px;
            margin:5px;
            height:200px;
            width:200px;
            border:solid 20px transparent;
            border-top-color:blue;
            box-shadow:inset 0 0 0 100px lightblue;
            border-radius:100%;"
     >Some text <br/> too?</div>

【讨论】：