Концентрические окружности на 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 [1318 просмотров]