Концентрические кольца (аналогичные радару) с использованием CSS ⇐ Html

[Anonymous]

Я делаю игру с линко -борьбой. Начало с визуальных эффектов и иметь эту структуру HTML /CSS: < /p>


:root {
background-color: black;
}

.boards-container {
display: flex;
justify-content: space-evenly;
align-items: center;
}

/* ------------------GAME BOARD----------------------------------------- */

.game-board {
display: grid;
grid-template-columns: 50px repeat(10, 50px);
grid-template-rows: 50px repeat(10, 50px);
gap: 1px;
/* position: relative; -------- do I really need it? apparently not unless I have children with position: absolute?*/
z-index: 1;
grid-column: 2 / span 10;
grid-row: 2 / span 10;
color: greenyellow;
}

.game-board-corner {
grid-row: 1;
grid-column: 1;
}

.game-board-col-label {
grid-row: 1;
}

.game-board-row-label {
grid-column: 1;
}

.game-board-grid {
grid-column: 2 / span 10;
grid-row: 2 / span 10;
display: grid;
grid-template-columns: repeat(10, 50px);
grid-template-rows: repeat(10, 50px);
gap: 1px;
}

.game-board-cell {
background-color: transparent;
border: 1px greenyellow;
position: relative;
overflow: visible;
}

.game-board-cell:hover {
background-color: greenyellow;
}

/* ------------------RADAR---------------------------------- */
.radar-circle-container {
grid-column: 2 / span 10;
grid-row: 2 / span 10;
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}

.radar-circle {
border: 2px solid greenyellow;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

.circle1{width: 100%; height: 100%;}
.circle2{width: 75%; height: 75%}
.circle3{width: 75%; height: 75%;}
.circle4{width: 75%; height: 75%;}< /code>

















< /code>
< /div>
< /div>
< /p>
о расстоянии между кольцами - это не совсем (если я правильно понимаю, потому что ширина составляет 75% от прямого родителя, а не основного контейнера). Как я могу исправить это, и что было бы самым чистым способом сделать это? Я до сих пор не уверен в использовании вложенных DOV-есть ли лучше, если все кольца-это дети одного элемента?>

Подробнее здесь: https://stackoverflow.com/questions/796 ... -using-css