使用CSS或SVG绘制半圆 [英] Draw half circle with CSS or SVG

问题描述

我在寻找一种使用CSS或SVG绘制此圆的底部的方法。我看到这个答案，但它处理一个完美的半圆，而我需要一个额外的段切断，使它有点不到一半。这可能不是纯CSS，但SVG答案变得复杂，让我修改。

 < svg class =pie> < circle cx =115cy =115r =110>< / circle> < path d =M115,115 L115,5 A110,110 1 0,1 225,115 z>< / path>< / svg>  

div>

解决方案

您可以使用CSS：

  .partial-circle {position：relative; height：20px; width：100px; overflow：hidden;}。partial-circle：before {content：''; position：absolute; height：100px; width：100px; border-radius：50％; bottom：0;背景：＃D08707;}  

 < div class = partial-circle>< / div>  

还有两个部分：

  .partial-circle {position：relative; width：100px; overflow：hidden;}。partial-circle：before {content：''; position：absolute; height：100px; width：100px; border-radius：50％;}。partial-circle.top {height：80px;}。partial-circle.bottom {height：20px;}。partial-circle.top:before {top：0; background：＃E19B21;}。partial-circle.bottom：before {bottom：0;背景：＃D08707;}  

 < div class =部分圆顶>< / div>< div class =partial-circle bottom>< / div>  

div>

I'm looking for a way to draw the bottom portion of this circle using CSS or SVG. I've seen this answer but it deals with a perfect half circle, whereas I need an extra segment cut off to make it a bit less than half. It's probably not possible with pure CSS but the SVG answer gets complicated for me to modify.

<svg class="pie">
  <circle cx="115" cy="115" r="110"></circle>
  <path d="M115,115 L115,5 A110,110 1 0,1 225,115 z"></path>
</svg>

解决方案

You can do it with CSS:

.partial-circle {
  position: relative;
  height: 20px;
  width: 100px;
  overflow: hidden;
}
.partial-circle:before {
  content: '';
  position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  bottom: 0;
  background: #D08707;
}

<div class="partial-circle"></div>

You can also have the two parts:

.partial-circle {
  position: relative;
  width: 100px;
  overflow: hidden;
}
.partial-circle:before {
  content: '';
  position: absolute;
  height: 100px;
  width: 100px;
  border-radius: 50%;
}
.partial-circle.top {
  height: 80px;
}
.partial-circle.bottom {
  height: 20px;
}
.partial-circle.top:before {
  top: 0;
  background: #E19B21;
}
.partial-circle.bottom:before {
  bottom: 0;
  background: #D08707;
}

<div class="partial-circle top"></div>
<div class="partial-circle bottom"></div>

这篇关于使用CSS或SVG绘制半圆的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！