这次带来的效果是大郑州的标志性建筑之一二七纪念塔。其实CSS不适合做这样复杂的建筑模型，性能上会差很多。

老规矩，先看效果：

需求拆分：

这个效果主要可以分为这几个部分

1、塔身部分

2、塔顶部分

3、五角星

4、塔基部分

首先分析塔身部分，对称的双结构11层塔。

只要完成其中一层，就可以复制出塔身部分。

每一层都是六面体塔身，所以塔身部分，最小重复粒子是一个墙面。

为了尽量减少dom数量，我打算使用一个div画出一组墙。

1）墙体部分，一个带背景色的div

2）窗户部分使用before：

1.使用border完成窗户边框

2.顶部和底部大约20%的区域使用线性渐变画出来【浅-深-浅】的渐变颜色

3.中间部分50%区域使用线性渐变画出【浅-深-浅-深-浅】的渐变颜色

4.三个渐变直接的空隙，我们给元素加上深色背景，填充类似边框效果

主要使用到linear-gradient属性

.wall {  position: absolute;  width: 100px;  height: 80px;  background: #bdafa2;  display: flex;  justify-content: center;  align-items: center;  box-shadow: inset 0 0 15px rgba(0, 0, 0, .2), inset 0 0 3px rgba(0, 0, 0, .2);  transform-style: preserve-3d;}.wall::before {  position: absolute;  top: 30px;  width: 30px;  height: 40px;  border: solid 2px #715e5a;  content: '';  background-color: #715e5a;  background-image: linear-gradient(to right, #cdc8cf 14px, 0, #715e5a 16px 0, #cdc8cf 0),     linear-gradient(to right, #cdc8cf 14px, 0, #715e5a 16px 0, #cdc8cf 0),     linear-gradient(to right, #cdc8cf 7px, 0, #715e5a 9px, 0, #cdc8cf 21px, 0, #715e5a 23px, 0, #cdc8cf 0);  background-size: 100% 20%, 100% 20%, 100% 50%;  background-repeat: no-repeat;  background-position: 0 0, 0 100%, 0 50%;}

顶部部分的梯形瓦，我们使用after：

1.请回忆我们初中学习的三角函数，我们得到斜边40px，60deg倾角的瓦，需要比墙宽40像素。

2.使用clip-path多边形，将after裁剪成梯形

.wall::after {  position: absolute;  top: 0;  left: -20px;  width: 140px;  height: 40px;  content: '';  background: #053f17;  transform-origin: center 0;  transform: rotateX(60deg);  clip-path: polygon(20px 0, 120px 0, 100% 100%, 0 100%);  box-shadow: inset 0px -1px 30px rgba(255, 255, 255, .4);}

这样，一个div就画出一面。

然后，我们将墙面复制六份，分别旋转60度形成一个六边形。

.wall-1 {  transform: rotateY(0) translateZ(86px);}.wall-2 {  transform: rotateY(60deg) translateZ(86px);}.wall-3 {  transform: rotateY(120deg) translateZ(86px);}.wall-4 {  transform: rotateY(180deg) translateZ(86px);}.wall-5 {  transform: rotateY(240deg) translateZ(86px);}.wall-6 {  transform: rotateY(300deg) translateZ(86px);}

一层塔身就完成了。

我们将塔身复制11份，设置一下top值。

最后，将整个外层div复制一份，两个div略微做位移和旋转。得到了双子塔结构。

这中间有个可以优化的地方，就是是交界处的那一面墙，其实可以去掉的。减少一些dom。

第二步，我们开始画钟楼。

CSS画钟表，网络上有很多方式。我们可以做成很漂亮的还可以真实交互的钟表。

不过在这里，我们只要显示出钟表的样式就可以了。而且还是远观，不用特别精确。

这里。大家可以发现，钟楼的结构和墙体其实是一样的，我们直接复用墙体的样式。然后稍微修改

修改顶部的梯形after，直接变成一个三角形将楼顶盖住。修改窗户的样式，我们还是要使用一个before来画出一个钟表的样式。（不要觉得不可能，见证奇迹的时候）使用圆锥渐变色，画出12组深浅相间的颜色，作为12个数字使用圆形渐变色，覆盖表盘，做出中心点和清除上边的12道线再使用圆锥渐变，只画出两条线作为时针和分针

第三步，画一个闪闪的红星。

基本原理是使用css画三个等边三角形。然后合并起来。这里就不再写代码了，网上很多。

最后一步，画出地基部分。

这个就想对简单多了。跟画墙体没有啥区别，就是六边形变成四边形。

after的背景继续使用线性渐变，画出栏杆部分。

.handrail::after {  position: absolute;  top: -30px;  width: 100%;  height: 20px;  content: '';  background-image: linear-gradient(90deg, #cdc8cf 4px, 0, #0000 12px 0);  background-size: 12px;}

然后再复制三层，分别使用sacle3D缩小一下X轴和Z轴。

增加上一个旋转动画，效果完成！！！

由于手机渲染效果较差，删除了一些效果。

代码仓库地址：

演示地址：