非常抱歉，断更了半年，原因也是有很多，疫情期间在老家也是没有电脑，上班后非常的忙，种种原因吧。

让小伙伴们久等了，非常抱歉！后续还是保持正常更新，不辜负小伙伴们的信任。

下面还是回归今天的主题：CSS如何制作三棱锥？

结构

三棱锥，大家看图，应该能看到它共有4个面，分别是3个侧面，1个底面。我们将其细分为，前面、左面、右面和底面。用html表示如下：

<ul class="cones-inner">
  <li class="front"></li>
  <li class="right"></li>
  <li class="left"></li>
  <li class="bottom"></li>
</ul>

逐个击破

CSS三角形

每个面都是一个三角形，下面我们用CSS制作一个三角形，之前有很多文章都有写过，今天还是再写一次。

width: 0;
height: 0;
border-top: 100px solid black;
border-right: 100px solid red;
border-left: 100px solid blue;
border-bottom: 100px solid green;

大家看，给一个div设置不同的边颜色，就会组成如上图的图形。这样我们就可以画出一个三角形了，比如上、左、右都是透明色，就一会看到底边的绿色了。

width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 100px solid transparent;
border-left: 100px solid transparent;
border-bottom: 100px solid green;

OK，下面运用到我们三棱锥上面

CSS三棱锥的组成

.cones-inner {
  position: absolute;
  display: block;
}
.cones-inner li {
  position: absolute;
  list-style: none;
  top: 0;
  z-index: 10;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid rgba(80,80,80,.7);
}

这里，其实有4个三角形，不过每个都重叠在一起了，用了绝对定位。

一、右侧面

.cones-inner .left {
  border-bottom: 100px solid rgba(120,120,120,.7);
  transform: rotate3d(1, 1.732, 0, -70.5deg);
}

transform: rotate3d(x, y, z, angle);

参数解析:

（1）.x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值。

（2）.y：是一个0到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值。

（3）.z：是一个0到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值。

（4）.angle：一个角度值，指定在3D空间旋转角度，正值顺时针旋转，反之元素逆时。

接着，咱们改变右侧面的位置，使其顶角重合。

.cones-inner .left {
  border-bottom: 100px solid rgba(120,120,120,.7);
  transform: rotate3d(1, 1.732, 0, -70.5deg);
  transform-origin: 75% 50%;
}

transform-origin: x-axis y-axis z-axis;

transform-origin 属性允许您改变被转换元素的位置。定义视图被置于 X/Y/Z 轴的何处。

二、同理制作出其他几个面

.cones-inner .front {
  border-bottom: 100px solid rgba(80,80,80,.7);
  transform: rotate3d(-1, 1.732 , 0, 70.5deg);
  transform-origin: 25% 50%;
}
.cones-inner .right {
  border-bottom: 100px solid rgba(160,160,160,.7);
  transform: rotate3d(1, 0, 0, 70.5deg);
  transform-origin: 50% 100%;
}

是不是觉得少了点什么？

底面没有提到，对的。底面上面默认值有些了。li里面的border-bottom就可以作为底面了，当然，也可以重新写啦