Question

我想在一个像甜甜圈的圆内创建一个圆，但是应该动态创建。例如如果我的页面宽度为500px，高度为500px，则应该适合。或者如果我有其他一些宽度和高度，例如100px和100px，则应该适合。我正在使用div和css在角度项目中创建一个组件。我浏览了以下URL，但是高度和宽度是固定的 How to make one circle inside of another using CSS

下面是内圆和外圆的css

.empty-wheel-outer {
  display: inline-block;
  width:  60px;
  height: 60px;
  border: 1px solid $alto;
  border-radius: 50%;
}

.empty-wheel-inner {
  display: inline-block;
  width: 32px;
  height: 32px;
  border: 1px solid $alto;
  border-radius: 50%;
  margin: 13px;
}

Answer 1

高度和宽度将以％的百分比动态添加到子项中，并通过添加圈子类自动居中

Try changing child width and height it will stay in center

如果需要进一步的解释，请告诉我。

.wraper {
  width: 60px;
  height: 60px;
}

.circle {
  display: flex;
  align-items: center;
  border: 1px solid red;
  border-radius: 50%;
}

.empty-wheel-outer {
  width: 100%;
  height: 100%;
}

.empty-wheel-inner {
  width: 50%;
  height: 50%;
  margin: auto;
}

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <div class="wraper">
    <span class="circle empty-wheel-outer">
      <span class=" circle empty-wheel-inner"></span>
    </span>
    <div/>
  </div>
</body>

</html>

Answer 2

这应该有帮助：

.outerCircle{
  width: 60px;
  height: 60px;
  border: 1px solid #000;
  border-radius: 50%; 
  display: flex;
  align-items: center;
  justify-content: center;
}
.innerCircle{
  width: 32px;
  height: 32px;
  border: 1px solid #000;
  border-radius: 50%;
}

<div class="outerCircle">
  <div class="innerCircle"></div>
</div>

Answer 3

我对您的代码进行了一些更改。请检查

Answer to "https://stackoverflow.com/questions/54881664/how-to-create-a-circle-inside-a-circle-dynamically-like-a-donut"

CSS：

.empty-wheel-outer {
  display: inline-block;
  width:  -webkit-fill-available;
  height:  -webkit-fill-available;
  border: 1px solid red;
  border-radius: 50%;
}

.empty-wheel-inner {
      display: inline-block;
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    border: 1px solid blue;
    border-radius: 50%;
    margin: 0 10%;
}

<div class="empty-wheel-outer">
  <div class="empty-wheel-inner">
  </div>
</div>

如何在圆内动态创建圆（像甜甜圈）

3 个答案: