Search code examples
htmlcsscss-shapes

HTML arc sector with inline style

I would like to use HTML + CSS to draw a arc sector with fixed radix and length (e.g. 30px radius and 70% length).

I found so far most of the solution is to combined two pictures with position:absoulte. Unfortunately, my html codes will be embedded as an email template to send out, and I found that Gmail does not support absolute position. And that is also the reason why I would like to use inline style rather than header css.

Related question here: HTML5 / CSS3 Circle with Partial Border

The similar output I am looking for. http://dabblet.com/gist/3949571

Any help for it?

Solution

  • I'd use an 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>