內聯樣式的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>

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>