所有线条一起形成一个圆圈

Question

我希望所有这七条线都以这样的方式排列，它们形成一个圆形设计。在背景中设计了一个演示圈，所有七条线都以这样的方式弯曲，使它们完全触及圆圈的边界。这里，七个类别编码有七种不同的颜色。在最后阶段，只有所有这七行应该以圆形格式可见。

.div7 {
  width: 100px;
  height: 10px;
  background: red;
  color: white;
  font-weight: bold;
  position: relative;
}

.div6 {
  width: 100px;
  height: 10px;
  background: blue;
  color: white;
  font-weight: bold;
  position: relative;
  margin-top: 5px;
}

.div1 {
  width: 100px;
  height: 10px;
  background: green;
  color: white;
  font-weight: bold;
  position: relative;
  margin-top: 5px;
}

.div2 {
  width: 100px;
  height: 10px;
  background: yellow;
  color: white;
  font-weight: bold;
  position: relative;
  margin-top: 5px;
}

.div3 {
  width: 100px;
  height: 10px;
  background: pink;
  color: white;
  font-weight: bold;
  position: relative;
  margin-top: 5px;
}

.div4 {
  width: 100px;
  height: 10px;
  background: cyan;
  color: white;
  font-weight: bold;
  position: relative;
  margin-top: 5px;
}

.div5 {
  width: 100px;
  height: 10px;
  background: gray;
  color: white;
  font-weight: bold;
  position: relative;
  margin-top: 5px;
}

<div style="border:1px solid;border-radius:50%;width:100px;">

  <div class="div7"></div>
  <div class="div6"></div>
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
  <div class="div5"></div>

</div>

Answer 1

这可能会让你感到惊讶。

您所要做的就是将overflow: hidden;添加到您的父级div：

.circle {
  border: 1px solid;
  border-radius: 50%;
  width: 100px;
  overflow: hidden;
}

.div1 {
  width: 100px;
  height: 10px;
  background: green;
  color: white;
  font-weight: bold;
  position: relative;
  margin-top: 5px;
}

.div2 {
  width: 100px;
  height: 10px;
  background: yellow;
  color: white;
  font-weight: bold;
  position: relative;
  margin-top: 5px;
}

.div3 {
  width: 100px;
  height: 10px;
  background: pink;
  color: white;
  font-weight: bold;
  position: relative;
  margin-top: 5px;
}

.div4 {
  width: 100px;
  height: 10px;
  background: cyan;
  color: white;
  font-weight: bold;
  position: relative;
  margin-top: 5px;
}

.div5 {
  width: 100px;
  height: 10px;
  background: gray;
  color: white;
  font-weight: bold;
  position: relative;
  margin-top: 5px;
}

.div6 {
  width: 100px;
  height: 10px;
  background: blue;
  color: white;
  font-weight: bold;
  position: relative;
  margin-top: 5px;
}

.div7 {
  width: 100px;
  height: 10px;
  background: red;
  color: white;
  font-weight: bold;
  position: relative;
}

<div class="circle">

  <div class="div7"></div>
  <div class="div6"></div>
  <div class="div1"></div>
  <div class="div2"></div>
  <div class="div3"></div>
  <div class="div4"></div>
  <div class="div5"></div>

</div>