使用 CSS 或 SVG 绘制半圆
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27682973/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Draw half circle with CSS or SVG
提问by parliament
I'm looking for a way to draw the bottom portion of this circle using CSS or SVG. I've seen this answerbut 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.
我正在寻找一种使用 CSS 或 SVG 绘制此圆底部的方法。我已经看到了这个答案，但它处理的是一个完美的半圆，而我需要切断一个额外的线段以使其小于一半。纯 CSS 可能是不可能的，但是 SVG 答案对我来说修改起来很复杂。
<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>
回答by Weafs.py
Why not use two pathelements with an arc command?
为什么不在patharc 命令中使用两个元素？
<svg width="135" height="135">
<path d="M125,85 a60,60 0 1,0 -115,0" fill="#E79A16" /><!--Top Half-->
<path d="M10,85 a60,60 0 0,0 115,0" fill="#D78500" /><!--Bottom Half-->
</svg>You can separate them easily.
您可以轻松地将它们分开。
<svg width="135" height="135">
<path d="M125,80 a60,60 0 1,0 -115,0" fill="#E79A16" /><!--Top Half-->
</svg>
<svg width="135" height="135">
<path d="M10,80 a60,60 0 0,0 115,0" fill="#D78500" /><!--Bottom Half-->
</svg>
<svg width="135" height="135">
<path d="M10,0 a60,60 0 0,0 115,0" fill="#D78500" /><!--Bottom Half-->
</svg>回答by Oriol
You can do it with CSS:
你可以用 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>回答by Naser Mirzaei
Simpler way without using path
不使用的更简单的方法 path
<svg version="1.1" width="64" height="64" xmlns="http://www.w3.org/2000/svg">
<clipPath id="cut-off">
<rect x="0" y="0" width="64" height="40"/>
</clipPath>
<circle cx="32" cy="32" r="32" fill="#d08807"/>
<circle cx="32" cy="32" r="32" fill="#e19b22" clip-path="url(#cut-off)"/>
</svg>