如何使用纯CSS实现一块乐高积木

居中显示：

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background:radial-gradient(circleatcenter,white,skyblue);

}

定义容器尺寸：

.brick{

width:40em;

height:30em;

font-size:10px;

}

画出积木的正面：

.brick{

position:relative;

}

.sides.front{

position:absolute;

width:9em;

height:6.8em;

background-color:#237fbd;

top:19em;

left:7em;

}

画出积木的右面：

.sides>*{

position:absolute;

background-color:#237fbd;

}

.sides.right{

width:18em;

height:6.8em;

filter:brightness(0.8);

top:19em;

left:calc(7em+9em);

}

画出积木的顶面：

.sides.top{

width:18em;

height:10.4em;

filter:brightness(1.2);

top:calc(19em-10.4em);

left:calc(7em+9em);

}

把以上3个面组合成立方体：

.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);

}

接下来画积木的凸粒。

在dom中增加8个凸粒元素：