Question

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

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

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

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

对它有任何帮助吗？

Answer 1

我使用的是SVG。

＆＃13;

    **or try this in code**

＆＃13;

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

＆＃13;

Answer 2

您可以使用透明边框和插入阴影来绘制bg颜色：

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

内联样式的

2 个答案: