HTML 带内联样式的弧形扇区

Question

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

目前为止我发现大部分的解决方案是用 position:absoulte 组合两张图片。不幸的是，我的 html 代码将被嵌入为电子邮件模板发送出去，而且我发现 Gmail 不支持绝对位置。这也是我想使用内联样式而不是 header 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>

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

HTML 带内联样式的弧形扇区

HTML arc sector with inline style

html

css

css-shapes