创建一个双色圆圈

Question

我试图创建两个半圆（每个都有不同的颜色），它们共同形成一个圆圈。像这样的东西

DEMO

我使用2个元素和一些css创建了这个：

def index():
        a = mongo.db.collectionsNames.find()
        b = mongo.db.collectionsNames.find()
        return render_template('index.html', collectionsNames1=a, collectionsNames2=b)

和

<span class="circle-part half-left-circle"></span>
<span class="circle-part half-right-circle"></span>

虽然这正是我所需要的，但我想知道这是否可以通过一个html元素实现（当然没有伪元素:)？

Answer 1

以下是我要做的工作片段，使用border：

• %值代替px border-radius，它简化了很多！
• border-color为每一面添加正确的颜色。
• transform: rotate(45deg);将其转换为您想要的内容。

body{
  background: #ccc;
}

.halves-circle{
  background: #fff;
  height: 200px;
  width: 200px;
  border: 20px solid;
  border-radius: 50%;
  border-color: green green red red;
  transform: rotate(45deg);
}

<div class="halves-circle">

⋅ ⋅ ⋅

我们也可以使用一些CSS变量，如果你想制作其中的很多：

body{
  background: #ccc;
}

.halves-circle{
  background: #fff;
  height: var(--size);
  width: var(--size);
  border: var(--border) solid;
  border-radius: 50%;
  border-color: green green red red;
  transform: rotate(45deg);
}

#hc1{
  --size: 100px;
  --border: 20px;
}

#hc2{
  --size: 60px;
  --border: 30px;
}

#dot{ /* We can even do this! */
  --size: 0px;
  --border: 20px;
}

<div class="halves-circle" id="hc1"></div>
<div class="halves-circle" id="hc2"></div>
<div class="halves-circle" id="dot"></div>

希望它有所帮助。

Answer 2

这是一个更简单的解决方案，只有2个渐变和更少的代码：

＆＃13;

＆＃13;

.circle {
  margin:20px;
  border-radius:50%;
  width:200px;
  height:200px;
  background:
      radial-gradient(circle at center,white 60%,transparent 60.5%),
      linear-gradient(to right,red 50%,green 0);
}

body {
 background-color:pink;
}

＆＃13;

<div class="circle">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

请尝试此代码

＆＃13;

＆＃13;

body {
  background: #ccc;
}
.circle {
 margin: 25px 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 12px solid transparent;
  background-size: 100% 100%, 100% 50%,100% 100%, 100% 50%;
  background-repeat: no-repeat;
  background-image: linear-gradient(white, white), 
                    linear-gradient(360deg, green 100%, lightgrey 100%),
                    linear-gradient(360deg, red 100%, lightgrey 100%);
  background-position: center center, left top, right top, left bottom, right bottom;
  background-origin: content-box, border-box, border-box, border-box, border-box;
  background-clip: content-box, border-box, border-box, border-box, border-box;
  transform: rotate(90deg);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

小提琴：http://jsfiddle.net/66r7nj4x/