Адаптивный круг

Question

Нужно сверстать круг, внутри которого будет ещё один. Это 2 обводки. Внутри будет изображение. Выглядит это так:

Круг 1 и 2 - должны быть фильтрами с блюром. Так же нужно сделать его резиновым, что-бы на разных разрешениях это всё растягивалось и сжималось без нарушений пропорций.

Мои попытки:

.container {
  display: flex;
  background-color: #5B4C98;
}
.container .desc {
  display: flex;
  align-items: center;
  max-width: 50%;
}
.container .circle {
  max-width: 50%;
}
.container .circle .circle__external {
  background-color: rgba(255, 255, 255, 0.1);
  filter: blur(2px);
  border-radius: 50%;
  padding: 40px;
}
.container .circle .circle__external .circle__internal {
  background-color: rgba(1, 1, 1, 0.1);
  filter: blur(2px);
  border-radius: 50%;
  padding: 40px;
}
.container .circle .circle__external .circle__internal .circle__content {
  overflow: hidden;
  border-radius: 50%;
  background-color: #fff;
}
.container .circle .circle__external .circle__internal .circle__content img {
  width: 100%;
  object-fit: cover;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Circle</title>
</head>
<body>
  <div class="container">
    <div class="desc">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis vero deserunt hic officia at laborum, quia in quo? Quae animi quaerat, id perferendis autem mollitia at similique inventore deserunt nisi!</p>
    </div>
    <div class="circle">
      <div class="circle__external">
        <div class="circle__internal">
          <div class="circle__content">
            <img src="https://i.stack.imgur.com/ILTQq.png" alt="penguin">
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Моё решение при изменении размера нарушается в пропорциях, это первая проблема. Вторая проблема, блюр почему-то распространяется на вложенные теги, тут я видимо чего-то не знаю о работе "filter".

Answer 1

Не очень понял зачем вам там blur и что именно надо сделать, но вот попробуйте поиграть с box-shadow, может, так проще будет...

.container {
  display: flex;
  background-color: #5B4C98;
}

.container .circle {
  max-width: 50%;
}

.container .circle .circle__external {
  padding: 4vw;
  box-shadow: 0 0 5vw #fff inset, 0 0 0.5vw #fff;
  border-radius: 50%;
}

.container .circle .circle__external .circle__internal {
  padding: 4vw;
  box-shadow: 0 0 5vw #fff inset, 0 0 0.5vw #fff;
  border-radius: 50%;
}

.container .circle .circle__external .circle__internal .circle__content {
  border-radius: 50%;
  background-color: #fff;
  padding: 6vw;
}

.container .circle .circle__external .circle__internal .circle__content img {
  width: 100%;
  aspect-ratio: 1;
}

<div class="container">

  <div class="circle">
    <div class="circle__external">
      <div class="circle__internal">
        <div class="circle__content">
          <img src="https://i.stack.imgur.com/ILTQq.png" alt="penguin">
        </div>
      </div>
    </div>
  </div>
</div>

БЛОГ НА HUSL

Адаптивный круг

Ответы (1 шт):