Example one one to four dice

The implementation effect is as follows:

The HTML code

<div class="dice">
    <div class="row1">
        <div class="one-face">
            <span class="pot"></span>
        </div>

        <div class="three-face">
            <span class="pot"></span>
            <span class="pot"></span>
            <span class="pot"></span>
        </div>
    </div>

    <div class="row2">
        <div class="two-face">
            <span class="pot"></span>
            <span class="pot"></span>
        </div>
        <div class="four-face">
            <div class="column">
                <span class="pot"></span>
                <span class="pot"></span>
            </div>
            <div class="column">
                <span class="pot"></span>
                <span class="pot"></span>
            </div>
        </div>
    </div>
</div>
Copy the code

CSS style code

<style> body{ background-color: black; } .dice{ display:flex; justify-content: center; align-items: center; } [class $='face']{ margin:16px; /* Set all margin attributes */ padding:4px; /* Set all fill attributes */ background-color: lightgray; width: 120px; height:120px; -o-object-fit: contain; object-fit: contain; /* Specifies how the contents of the element should fit into the height and width of the specified container. Contain - Keep the original scale. Content is scaled. */ -webkit-box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7 ; /*inset- Change the inner shadow of the shadow from the outer shadow (at the beginning); 5px- Shadow size; 0- fuzzy distance */ box-shadow: inset 0 5px white, inset 0-5px # BBB, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7; border-radius: 10%; } .pot{ display: block; width: 25px; height: 25px; border-radius: 50%; margin: 4px; background-color: #333; -webkit-box-shadow: inset 0 3px #111,inset 0 -3px #555; box-shadow: inset 0 3px #111,inset 0 -3px #555; } .one-face{ display: flex; justify-content: center; align-items: center; } .two-face, .three-face, .four-face{ display: flex; justify-content: space-between; }.two-face. pot:nth-of-type(2){/* Matches each element of the NTH child of a specific type belonging to the parent element */ align-self: flex-end; } [class^='row']{ display: flex; flex-direction: column; } .three-face .pot:nth-of-type(2){ align-self: center; } .three-face .pot:nth-of-type(3){ align-self: flex-end; } .four-face .column{ display: flex; flex-direction: column; justify-content: space-between; } </style>Copy the code

Example two: Nine layouts of one-point dice

The implementation effect is as follows:

The HTML code

<div class="one-first-left-face">
    <span class="pot"></span>
</div>
Copy the code

CSS style code

body{ background-color: black; } .dice{ display:flex; justify-content: center; /* align horizontally */ align-items: center; /* flex-wrap: wrap; /* newline */} [class $='face']{margin:16px; padding:4px; background-color: lightgray; width: 120px; height:120px; -o-object-fit: contain; object-fit: contain; -webkit-box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7 ; box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7 ; border-radius: 10%; } .pot{ display: block; width: 25px; height: 25px; border-radius: 50%; margin: 4px; background-color: #333; -webkit-box-shadow: inset 0 3px #111,inset 0 -3px #555; box-shadow: inset 0 3px #111,inset 0 -3px #555; } .one-first-center-face{ display: flex; justify-content: center; } .one-first-right-face{ display: flex; justify-content: flex-end; } .one-sec-left-face{ display: flex; align-items: center; } .one-sec-center-face{ display: flex; justify-content: center; align-items: center; } .one-sec-right-face{ display: flex; justify-content: flex-end; align-items: center; } .one-thi-left-face{ display: flex; align-items: flex-end; } .one-thi-center-face{ display: flex; justify-content: center; align-items: flex-end; } .one-thi-right-face{ display: flex; justify-content: flex-end; align-items: flex-end; }Copy the code

Example 3 The rest of the style dice

The implementation effect is as follows:

The HTML code

<div class="dice"> <div class="two-top-face"> <span class="pot"></span> <span class="pot"></span> </div> <div class="two-left-face"> <span class="pot"></span> <span class="pot"></span> </div> <div class="two-center-face"> <span class="pot"></span> <span class="pot"></span> </div> <div class="two-one-center-face"> <span class="pot"></span> <span class="pot"></span> </div> <div class="four-face"> <div class="column"> <span class="pot"></span> </div> <div class="column"> <span class="pot"></span> </div> <div class="column"> <span class="pot"></span> <span class="pot"></span> </div> </div> <div class="six-face"> <div class="column"> <span class="pot"></span> <span class="pot"></span> </div> <div class="column"> <span class="pot"></span> <span class="pot"></span> </div> <div class="column"> <span class="pot"></span> <span class="pot"></span> </div> </div> <div class="six-sec-face"> <div class="column"> <span class="pot"></span> <span class="pot"></span> <span class="pot"></span> </div> <div class="column"> <span class="pot"></span> <span class="pot"></span> <span class="pot"></span> </div> </div> <div class="six-thi-face"> <div class="column"> <span class="pot"></span> <span class="pot"></span> <span class="pot"></span>  </div> <div class="column"> <span class="pot"></span> </div> <div class="column"> <span class="pot"></span> <span class="pot"></span> </div> </div> <div class="nine-face"> <div class="column"> <span class="pot"></span> <span class="pot"></span> <span class="pot"></span> </div> <div class="column"> <span class="pot"></span> <span class="pot"></span> <span class="pot"></span> </div> <div class="column"> <span class="pot"></span> <span class="pot"></span> <span class="pot"></span> </div> </div> </div>Copy the code

CSS style code

body{
    background-color: black;               
}
.dice{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
[class $='face']{
    margin:16px;
    padding:4px;
    background-color: lightgray;
    width: 120px;
    height:120px;
    -o-object-fit: contain;
    object-fit: contain;
    -webkit-box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7 ;
    box-shadow: inset 0 5px white, inset 0 -5px #bbb, inset 5px 0 #d7d7d7, inset -5px 0 #d7d7d7 ;
    border-radius: 10%;   
}
.pot{
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin: 4px;
    background-color: #333;
    -webkit-box-shadow: inset 0 3px #111,inset 0 -3px #555;
    box-shadow: inset 0 3px #111,inset 0 -3px #555;
}
.two-top-face,
.four-face,
.six-face,
.six-sec-face,
.nine-face
{
    display: flex;
    justify-content: space-between;
}
.two-left-face{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.two-center-face{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.two-one-center-face{
    display: flex;
    justify-content: flex-start;
}
.two-one-center-face .pot:nth-of-type(2){
    align-self: center;
}
.four-face .column{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.six-face .column{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.six-sec-face .column{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.six-thi-face{
   display:flex;
   flex-wrap:wrap;

}
.six-thi-face .column{
    display:flex;
    flex-basis: 100%;
    justify-content: space-between;
}
.six-thi-face .column:nth-child(2){
   justify-content: center;
}
.six-thi-face .column:nth-child(3){
   justify-content: space-between;
}

.nine-face .column{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
Copy the code