Я делаю игру с линко -борьбой. Начало с визуальных эффектов и иметь эту структуру 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
