<div class="dice-container">
<div class="dice" role="img" alt="1">
<div class="pip"></div>
</div>
<div class="dice" role="img" alt="2">
<div class="pip"></div>
<div class="pip"></div>
</div>
<div class="dice" role="img" alt="3">
<div class="pip"></div>
<div class="pip"></div>
<div class="pip"></div>
</div>
<div class="dice" role="img" alt="4">
<div class="pip"></div>
<div class="pip"></div>
<div class="pip"></div>
<div class="pip"></div>
</div>
<div class="dice" role="img" alt="5">
<div class="pip"></div>
<div class="pip"></div>
<div class="pip"></div>
<div class="pip"></div>
<div class="pip"></div>
</div>
<div class="dice" role="img" alt="6">
<div class="pip"></div>
<div class="pip"></div>
<div class="pip"></div>
<div class="pip"></div>
<div class="pip"></div>
<div class="pip"></div>
</div>
</div>
:root {
--diceWidth: 68px;
--paddingAndGap: 2px;
--pipWidth: 19px;
--baseColor: #212121;
--hoverColor: #757575;
}
.dice-container {
display: flex;
flex-wrap: wrap;
}
.dice-container > * {
margin-bottom: 1rem;
}
.dice-container > :not(:first-child) {
margin-left: 1rem;
}
.dice {
width: var(--diceWidth);
height: var(--diceWidth);
border: 5px solid var(--baseColor);
border-radius: 10px;
display: grid;
grid-template-rows: 33% 33% 33%;
grid-template-columns: 33% 33% 33%;
grid-gap: var(--paddingAndGap);
padding: var(--paddingAndGap);
}
.dice .pip {
background-color: var(--baseColor);
width: var(--pipWidth);
height: var(--pipWidth);
border-radius: 10px;
}
.dice:hover {
cursor: pointer;
}
.dice:hover {
border-color: var(--hoverColor);
}
.dice:hover .pip {
background-color: var(--hoverColor);
}
.dice .pip:nth-child(1) {
grid-area: a;
}
.dice .pip:nth-child(2) {
grid-area: b;
}
.dice .pip:nth-child(3) {
grid-area: c;
}
.dice .pip:nth-child(4) {
grid-area: d;
}
.dice .pip:nth-child(5) {
grid-area: e;
}
.dice .pip:nth-child(6) {
grid-area: f;
}
.dice[alt='1'] {
grid-template-areas:
'. . .'
'. a .'
'. . .';
}
.dice[alt='2'] {
grid-template-areas:
'. . a'
'. . .'
'b . .';
}
.dice[alt='3'] {
grid-template-areas:
'. . a'
'. b .'
'c . .';
}
.dice[alt='4'] {
grid-template-areas:
'a . b'
'. . .'
'c . d';
}
.dice[alt='5'] {
grid-template-areas:
'a . b'
'. c .'
'd . e';
}
.dice[alt='6'] {
grid-template-areas:
'a . b'
'c . d'
'e . f';
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.