无法在我的外部div

Question

我正在尝试创建一种圆形并尝试嵌入内圆，但内圆没有按照图像中的要求进行定位。

＆＃13;

＆＃13;

.outer-circle {
  width: 200px;
  height: 200px;
  background-color: coral;
  border-radius: 50% 50% 0 0;
  transform: rotate(90deg);
}

.inner-circle {
  width: 100px;
  height: 100px;
  margin-left: 10px;
  margin-top: 10px;
  background-color: blue;
  border-radius: 50%;
}

＆＃13;

<div class="outer-circle">
  <div class="inner-circle"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

如何在不编写任何Javascript的情况下根据需要定位内圈。

Answer 1

以下作品：

＆＃13;

＆＃13;

.outer-circle {
  width: 200px;
  height: 200px;
  background-color: coral;
  border-radius: 50% 50% 0 0;
  transform: rotate(90deg);
  padding-top: 15px;
}

.inner-circle {
  width: 160px;
  height: 160px;
  margin-left: 20px;
  margin-top: 10px;
  background-color: blue;
  border-radius: 50%;
}

＆＃13;

<div class="outer-circle">
  <div class="inner-circle"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

.outer-circle {
  width: 100px;
  height: 100px;
  background-color: coral;
  border-radius: 50% 50% 0 0;
  transform: rotate(90deg);
  padding: 10px;
}

.inner-circle {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
}

<div class="outer-circle">
  <div class="inner-circle"></div>
</div>

我删除了边距，并为.outer-circle添加了填充。这是现在最简单的方法。基本上你在两个圆上使高度相同，将填充添加到外圆会产生两者之间的差距，它会越大就越大。

Answer 3

其中一个解决方案是使用绝对定位：

＆＃13;

＆＃13;

.outer-circle {
  width: 200px;
  height: 200px;
  background-color: coral;
  border-radius: 50% 50% 0 0;
  transform: rotate(90deg);
  position: relative;
}

.inner-circle {
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

＆＃13;

<div class="outer-circle">
  <div class="inner-circle"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

其他信息：
margin（https://developer.mozilla.org/en-US/docs/Web/CSS/margin）
position（https://developer.mozilla.org/en-US/docs/Web/CSS/position）

.outer-circle {
  width: 200px;
  height: 200px;
  background-color: coral;
  border-radius: 50% 50% 0 0;
  transform: rotate(90deg);
}

.inner-circle {
  position:absolute;
  width: 100px;
  height: 100px;
  margin: 50px;
  background-color: blue;
  border-radius: 50%;
}

<div class="outer-circle">
  <div class="inner-circle"></div>
</div>

Answer 5

使用transform：translate

＆＃13;

＆＃13;

.outer-circle {
  width: 200px;
  height: 200px;
  background-color: coral;
  border-radius: 50% 50% 0 0;
 transform: rotate(90deg);
}

.inner-circle {
  width: 100px;
  height: 100px;
  margin-left: 50px;
  margin-top: 50px;
  background-color: blue;
  border-radius: 50%;
  transform: translate(0px,50px);
}

＆＃13;

<div class="outer-circle">
  <div class="inner-circle"></div>
</div>

＆＃13;

＆＃13;

＆＃13;