Как динамически создать круг внутри круга (как пончик) - PullRequest
Новая
       3

Как динамически создать круг внутри круга (как пончик)

0 голосов
/ 26 февраля 2019

Я хочу создать круг внутри круга, как пончик, но он должен быть создан динамически.например,Если у меня ширина страницы 500px и высота 500px, она должна соответствовать.или если у меня есть другие ширины и высоты, такие как 100px и 100px, это должно соответствовать. Я создаю компонент в угловом проекте, используя div и css.Я просмотрел приведенный ниже URL, но там зафиксированы высота и ширина Как сделать один круг внутри другого с помощью 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;
}

Ответы [ 3 ]

0 голосов
/ 26 февраля 2019

Я сделал некоторые изменения в вашем коде.Пожалуйста, отметьте это

Ответ на "/12450952/kak-dinamicheski-sozdat-krug-vnutri-kruga-kak-ponchik"

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>
0 голосов
/ 26 февраля 2019

высота и ширина будут добавлены динамически для дочерних элементов в%, и это будет автоматически отцентрировано, добавив класс круга

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>
0 голосов
/ 26 февраля 2019

Это должно помочь: 

.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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...