How to use pure CSS to realize a Lego building block
This article mainly shows you "how to use pure CSS to achieve a Lego", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use pure CSS to achieve a Lego" this article.
Code interpretation
Define dom. The container contains a set of 3 faces:
Centered display:
Body {
Margin:0
Height:100vh
Display:flex
Align-items:center
Justify-content:center
Background:radial-gradient (circleatcenter,white,skyblue)
}
Define the container size:
.brick {
Width:40em
Height:30em
Font-size:10px
}
Draw the front of the building block:
.brick {
Position:relative
}
.sides.front {
Position:absolute
Width:9em
Height:6.8em
Background-color:#237fbd
Top:19em
Left:7em
}
Draw the right side of the building block:
.sides > * {
Position:absolute
Background-color:#237fbd
}
.sides.right {
Width:18em
Height:6.8em
Filter:brightness (0.8)
Top:19em
Left:calc (7em+9em)
}
Draw the top face of the building block:
.sides.top {
Width:18em
Height:10.4em
Filter:brightness (1.2)
Top:calc (19em-10.4em)
Left:calc (7em+9em)
}
Combine the above three faces into a cube:
.sides.front {
Transform-origin:right
Transform:skewY (30deg)
}
.sides.right {
Transform-origin:left
Transform:skewY (- 30deg)
}
.sides.top {
Transform-origin:leftbottom
Transform:rotate (- 60deg) skewY (30deg)
}
Next, draw the bulge of the building block.
Add 8 bump elements to dom:
Define variables:
.studsspan:nth-child (1) {
-- nRO 1
}
.studsspan:nth-child (3) {
-- nRO 3
}
.studsspan:nth-child (5) {
-- nRO 5
}
.studsspan:nth-child (7) {
-- nRO 7
}
.studsspan:nth-child (2) {
-- nRO 2
}
.studsspan:nth-child (4) {
-- nRO 4
}
.studsspan:nth-child (6) {
-- nRO 6
}
.studsspan:nth-child (8) {
-- nRO 8
}
Draw the bump on the left:
.studsspan:nth-child (odd) {
Top:calc (4.6em+ (var (--n)-1) / 2*2.6em)
Left:calc (23.3m-(var (--n)-1) / 2*4.6em)
}
Draw the bump on the right:
.studsspan:nth-child (even) {
Top:calc (6.9em+ (var (--n)-2) / 2*2.6em)
Left:calc (27.9m-(var (--n)-2) / 2*4.6em)
}
Finally, draw the top face of the convex grain:
.studsspan:: before {
Content:''
Position:absolute
Width:inherit
Height:2em
Background-color:#4cb7ff
Border-radius:50%
}
The above is all the content of the article "how to use pure CSS to achieve a Lego". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
