0

Как сделать круг, с красным кругом внутри, расположенным по центру и толстой, целостной обводкой снаружи, которая немного бледнее цвета, самого круга?

1

4 ответа 4

3

    .round{
        width:40px;
        height:40px;
        background: #ff0000;
        border-radius: 50%;
        box-shadow: 0 0 0 5px #434344;
        border:30px solid #29292A;
    }
<div class="round"></div>

2

html, body {
  height: 100%;
}

body {
  margin: 0;
  display: grid;
  background: black;
}

div {
  width: 70vmin;
  aspect-ratio: 1;
  margin: auto;
  border-radius: 50%;
  background: radial-gradient(red, red 40%, transparent calc(40% + 1px)) #8888;
  border: .5em solid #888A;
}
<div></div>

2

Мой вариант))

body {
  background: black;
}
.round {
  display: block;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background:linear-gradient(to right, #2A2A2A 0, #2A2A2A 44%, #2E2F2F 50%, #2A2A2A 55%, #2A2A2A 100%);
  border: 7px solid #434343;
  position: relative;
}
.round:before {
  content: '';
  width: 100px;
  height: 100px;
  display: block;
  background-color: #F23849;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
}
<body>
<div class="round"></div>
</body>

1

Можно приблизительно как-то так сделать:

body,
.big-circle,
.midl-circle {
  display: grid;
  justify-content: center;
  align-content: center;
}

body {
  height: 100vh;
  background-color: black;
}

.big-circle,
.midl-circle,
.litl-circle {
  border-radius: 50%;
}

.big-circle {
  width: 200px;
  height: 200px;
  background-color: rgb(143, 158, 181);
}

.midl-circle {
  width: 180px;
  height: 180px;
  background-color: rgba(82, 90, 105, .8);
}

.litl-circle {
  width: 80px;
  height: 80px;
  background-color: rgb(245, 59, 59);
}
<div class="big-circle">
  <div class="midl-circle">
    <div class="litl-circle"></div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.