Концентрические окружности на CSS

Если нужно только 3 цвета, помочь может небольшой трюк с рамкой border, отступом padding и фоновым цветом.

Эти окружности получены вот такой разметкой HTML+CSS:

<style>
div.circle {
 width: 100px; height: 100px; /* ширина и высота содержимого блока */
 border-radius: 50%; /* круглая рамка */
 border: 33px solid blue; /* синий круг из border */
 background-color: red; /* красная окружность будет из фона */
 background-clip: content-box; /* фон закрашивается внутри поля содержимого */
 padding: 33px; /* отступы останутся белыми */
 margin: auto; /* горизонтально по центру */
}
</style>
<div class="circle"></div>

Если нужно больше вложенных окружностей, всё можно сделать ещё более "прозрачным" в написании стилем.

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

<style>
.mycircle {
 margin: 0 auto;
 border-radius: 50%;
}
.myshift {
 top: 15px;
 left: 15px;
 position: absolute;
}
.violet { 
 width: 210px;
 height: 210px;
 position: relative;
 background-color: violet; 
}
.navy { 
 width: 180px;
 height: 180px;
 background-color: navy; 
}
.lightblue { 
 width: 150px;
 height: 150px;
 background-color: lightblue; 
}
.green { 
 width: 120px;
 height: 120px;
 background-color: green; 
}
.yellow { 
 width: 90px;
 height: 90px;
 background-color: yellow; 
}
.orange { 
 width: 60px;
 height: 60px;
 background-color: orange; 
}
.red { 
 width: 30px;
 height: 30px;
 background-color: red; 
}
</style>
<div class="mycircle violet"> 
 <div class="mycircle navy myshift">
  <div class="mycircle lightblue myshift">
   <div class="mycircle green myshift">
    <div class="mycircle yellow myshift">
     <div class="mycircle orange myshift">
      <div class="mycircle red myshift">
      </div>
     </div>
    </div>
   </div>
  </div>
 </div>
</div>

P.S. Очень старые браузеры, где свойства border-radius ещё нет, конечно, отобразят просто квадраты вместо окружностей.

17.10.2020, 17:50 [1319 просмотров]