как сделать разрыв в окружности и поместить туда элемент?

Question

У меня не получается выполнение данного блока, как можно сделать разрыв в окружности?

Answer 1

Делается при помощи тега fieldset, нашёл по нему информацию и сверстал решение за 5 минут, советую сначала гуглить.

Само решение:

.border {
  max-width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 15px auto;
}
.border__title {
  text-align: center;
}
.border__title img {
  width: 20px;
  height: 20px;
}
.content {
  text-align: center;
}

<fieldset class="border">
  <legend class="border__title">
    <img src="https://svgsilh.com/svg/303113.svg" alt="">  
  </legend>
  <div class="content">
      Какой-то контент
  </div>  
</fieldset>

Тег <fieldset> создаёт границу.
Тег <legend> создаёт заголовок границы.

БЛОГ НА HUSL

как сделать разрыв в окружности и поместить туда элемент?

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