Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.