使用CSS创建一个具有两种不同颜色的环

Question

我试图像这样创建一个半环：

我知道背景图片或SVG可能会这样做，但是有一种纯粹的CSS方式吗？

我谷歌但只找到如何创建一个半圈：

＆＃13;

＆＃13;

.half-circle {
    width: 200px;
    height: 100px; /* as the half of the width */
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    border-bottom: 0;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

＆＃13;

<div class="half-circle">
<div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

是的，有可能通过css ..这是示例

<div class="loader">

</div>

require 'shellwords'

fname = 'foo/bar/file name with (special) characters.zip'

fname.shellescape  # => "foo/bar/file\\ name\\ with\\ \\(special\\)\\ characters.zip"

Answer 2

你可以使用它，如果你想要这个图是静态的，在动态情况下你需要使用javaScript。

＆＃13;

＆＃13;

.ring-container {height: 200px; overflow: hidden; position: relative;}
.ring {border: 15px solid #b25912; border-radius: 100%; width: 300px; height: 300px; position: absolute; top: 0; left: 0; z-index: 1;}
.ring-overlay {border: 15px solid transparent; border-top-color: #a6a6a6; border-left-color: #a6a6a6; border-radius: 100%; width: 300px; height: 300px; position: absolute; top: 0; left: 0; z-index: 2; transform: rotate(200deg);}

＆＃13;

<div class="ring-container">
	<div class="ring">
	</div>
	<div class="ring-overlay">
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;