Наложение 4 кружков на каждый угол квадрата CSS - PullRequest
Новая
       1

Наложение 4 кружков на каждый угол квадрата CSS

0 голосов
/ 05 марта 2020

Я создаю игру Simon Says, которая использует вспышку цветов в качестве игры на память. Я хочу наложить 4 круга на каждый из четырех углов фонового квадрата (квадрат будет прозрачным в окончательном варианте).

Я приложил изображение ССЫЛКА НА ИЗОБРАЖЕНИЕ того, как я хотел бы, чтобы оно выглядело, и я включил HTML и CSS. 

.html {
    color: grey;
}

#green {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    background-color: green;
    border-color: black;
    /*position: relative;*/
    /*float: left;*/

}

#red {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    background-color: red;
    border-color: black;
}

#yellow {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    background-color: gold;
    border-color: black;
}

#blue {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    background-color: blue;
    border-color: black;
}

#square {
    width: 400px;
    height: 400px;
    background-color: purple;
    position: relative;
    text-align: center;
    display: flex;
}

#display {
    width: 400px;
    height: 400px;
    border-radius: 200px;
    background-color: black;
    position: relative;
    text-align: center;
    display: flex;
}

#controls {
    margin: auto;
    position: relative;
    text-align: center;

}

#Highscore {
    position: relative;
    width: 30px;
    height: 20px;
    border-radius: 5px;
    background-color: lightgrey;
    text-align: center;
    display: inline-block;
}

#Currentscore {
    position: relative;
    width: 30px;
    height: 20px;
    border-radius: 5px;
    background-color: lightgrey;
    text-align: center;
    display: inline-block;
}

#startButton {
    position: relative;
    width: 60px;
    height: 20px;
    border-radius: 5px;
    background-color: lightgrey;
    text-align: center;
    display: inline-block;
}

#powerLight {
    background-color: red;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 5px auto;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simon Memory Game</title>
   
</head>
<body>
    <div class="game">
        <div id="green"></div>
        <div id="red"></div>
        <div id="yellow"></div>
        <div id="blue"></div>

        <div id="square">
            <div id="display">
                <div id="controls">
                    <div id="Highscore">00</div>
                    <button class="button" id="startButton">START</button>
                    <div id="Currentscore">00</div>
                    <div id="powerLight"></div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

1 Ответ

0 голосов
/ 05 марта 2020

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

Я переместил делители окружностей в #square div, поскольку, насколько я понимаю, мы хотим расположить окружности внутри это деление.

Затем вы можете использовать левую, правую, верхнюю и нижнюю позиции, чтобы расположить их, как я сделал в примере ниже. 

.html {
    color: grey;
}

.game {
    position: relative;
}

#green {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    background-color: green;
    border-color: black;
    position: absolute;
    left: 0;
    top: 0;
}

#red {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    background-color: red;
    border-color: black;
    position: absolute;
    right: 0;
    top: 0;
}

#yellow {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    background-color: gold;
    border-color: black;
    position: absolute;
    left: 0;
    bottom: 0;
}

#blue {
    width: 150px;
    height: 150px;
    border-radius: 75px;
    background-color: blue;
    border-color: black;
    position: absolute;
    right: 0;
    bottom: 0;
}

#square {
    width: 400px;
    height: 400px;
    background-color: purple;
    position: relative;
    text-align: center;
    display: flex;
}

#display {
    width: 400px;
    height: 400px;
    border-radius: 200px;
    background-color: black;
    position: relative;
    text-align: center;
    display: flex;
}

#controls {
    margin: auto;
    position: relative;
    text-align: center;

}

#Highscore {
    position: center;
    width: 30px;
    height: 20px;
    border-radius: 5px;
    background-color: lightgrey;
    text-align: center;
    display: inline-block;
}

#Currentscore {
    position: center;
    width: 30px;
    height: 20px;
    border-radius: 5px;
    background-color: lightgrey;
    text-align: center;
    display: inline-block;
}

#startButton {
    position: relative;
    width: 60px;
    height: 20px;
    border-radius: 5px;
    background-color: lightgrey;
    text-align: center;
    display: inline-block;
}

#powerLight {
    background-color: red;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin: 5px auto;
}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simon Memory Game</title>
    <link rel="stylesheet" href="assignment-02.css">
</head>
<body>
    <div class="game">
        <div id="square">
            <div id="display">
                <div id="controls">
                    <div id="Highscore">00</div>
                    <button class="button" id="startButton">START</button>
                    <div id="Currentscore">00</div>
                    <div id="powerLight"></div>
                </div>
            </div>
            <div id="green"></div>
            <div id="red"></div>
            <div id="yellow"></div>
            <div id="blue"></div>
        </div>
    </div>
    <script src="assignment-02.js"></script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...