用CSS绘制棱椎体

马黑黑 · 发表于 2022-4-14 07:01

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-4-14 11:38 编辑

以平面的视角观察棱椎体，大致可以分解为两个全等直角三角形。这两个直角三角形，相同长度的直角边靠在一起，构成棱椎体的可视界面。所以，绘制棱椎体，首要任务是绘制直角三角形。我们用最简洁的方式来画出第一个直角三角形：

.ling1 {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 160px 60px;
      border-color: transparent olive olive transparent;
}

<div class="ling1"></div>

这是橄榄色的三角形，效果如下图所示：

t1

再画一个直角在左边的，为了便于识别，我们给它一个不同的边框颜色，深紫色：

.ling2 {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 160px 60px;
      border-color: transparent transparent deeppink deeppink;
}

<div class="ling2"></div>

结果如下：

t2

现在，想办法让两个div排排坐。最容易想到的办法是给它们提供一个妈妈元素，让妈妈元素把它们归置起来。妈妈元素的空间高度为子元素边框的两倍，即上边框加下边框，等于320px，宽度则为两个子元素的四条左右边框之和，等于240px，母元素设为相对定位，为了便于观察，还设置有边框：

.mama {
      margin: auto;
      width: 240px;
      height: 320px;
      border: 1px solid;
      position: relative;
}

母元素其下的子元素需要绝对定位：

.mama div { position: absolute; }

然后把第二个子元素 .ling2 右移两个纵向边框的宽度，2*60=120(px)：

.ling2 {
      /* ... */
      left: 120px;
}

这样，就得到如下图所示的效果：

t3

嗯，有妈妈真好，有妈妈的两个三角形像两块宝。这两个不同颜色的三角形不仅排排坐吃果果，合体之后看上去已经像个棱椎体了，只是很2d而已。嗯，还有什么招数让它立体起来呢？让我们想一想，努力想一想。嗯，skew如何？用 transform 在Y轴扭转它们一点点，让它们摆个漂亮的pose看看：

.ling1 {
      /* ... */
      transform: skewY(20deg);
}

.ling2 {
      /* ... */
      transform: skewY(-20deg);
}

效果是酱紫滴：

t4

我噻，这不就是活脱脱的棱椎体了吗？爱了爱了木有？无需再做任何修饰了都。No No No，不然也，将来两个三角形要使用同一种颜色，正对着我们的棱线可能有些模糊，我们给它画上一根银丝强化一下棱线效果：

.line {
      width:1px;
      height: 315px;
      background: silver;
      left: 50%;
      top: 26px;
      opacity: .8;
}

<div class="line"></div>

由于两个三角形扭转的关系，正对着我们的棱线长度和位置都发生了些微的变化（请比较图三与图四），所以我们加上去的这根金贵的银线的尺寸与纵向位移也都做了相应的细微调整（也许我调整的还不够精准，我的放大镜是地摊货），最后给它一个轻微的透明度，让棱线看起来不那么突兀。进一步的修饰就是给妈妈元素加个阴影，用 drop-shadow 滤镜比较简单，而且去掉妈妈元素的边框之后，阴影效果只作用于椎体部分（很奇怪额）：

filter: drop-shadow(2px 2px 6px rgba(0,0,0,.6));

代码可以优化，比如可以考虑用妈妈元素的两个伪元素替代 .ling1 和 .ling2 选择器，有兴趣可以尝试一下。下面是本教程的全部代码：