CSS布局之使用Flex布局画骰子（5点）

/* 基础HTML结构 */
<div class="dice">
  <div class="side"></div>
  <div class="side"></div>
  <div class="side"></div>
  <div class="side"></div>
  <div class="side"></div>
</div>
 
/* CSS样式 */
.dice {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  background-color: #bbada0;
  border-radius: 10px;
  border: 3px solid #efdfd5;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
 
.side {
  width: 50%;
  height: 50%;
  background-color: #fcfdf5;
  border: 2px solid #efdfd5;
  border-radius: 10px;
  position: relative;
}
 
.side::before {
  content: '';
  position: absolute;
  width: 20%;
  height: 20%;
  background-color: #efdfd5;
  border-radius: 10px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
 
/* 随机应用于一个side类以模拟骰子的点 */
.side:nth-child(1) {
  background-color: #efdfd5;
}
 
.side:nth-child(2) {
  transform: rotate(60deg);
}
 
.side:nth-child(3) {
  transform: rotate(120deg);
}
 
.side:nth-child(4) {
  transform: rotate(180deg);
}
 
.side:nth-child(5) {
  transform: rotate(240deg);
}
 
.side:nth-child(6) {
  transform: rotate(300deg);
}

这段代码使用了Flexbox布局来创建一个简单的五点骰子模型。每个.side类代表骰子的一面，通过CSS的transform属性旋转不同的角度来模拟骰子的点分布。通过随机应用.side类，可以模拟骰子的随机点投射效果。