论坛 › 马黑黑教程专版 › 用CSS绘制棱椎体

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

用CSS绘制棱椎体

本帖最后由 马黑黑 于 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>

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



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

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

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

结果如下：



现在，想办法让两个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;
}

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



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

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


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

效果是酱紫滴：



我噻，这不就是活脱脱的棱椎体了吗？爱了爱了木有？无需再做任何修饰了都。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 选择器，有兴趣可以尝试一下。下面是本教程的全部代码：
<style>
.mama {
      margin: auto;
      width: 240px;
      height: 320px;
      border: 1px solid;
      position: relative;
      filter: drop-shadow(2px 2px 6px rgba(0,0,0,.6));
}
.mama div { position: absolute; }
.ling1 {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 160px 60px;
      border-color: transparent olive olive transparent;
      transform: skewY(20deg);
}

.ling2 {
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 160px 60px;
      border-color: transparent transparent deeppink deeppink;
      left: 120px;
      transform: skewY(-20deg);
}
.line {
      width:1px;
      height: 315px;
      background: silver;
      left: 50%;
      top: 26px;
      opacity: .8;
}

</style>

<div class="mama">
      <div class="ling1"></div>
      <div class="ling2"></div>
      <div class="line"></div>
</div>最终渲染效果再楼下。

马黑黑 发表于 2022-4-14 07:12

<style>
.mama {
        margin: auto;
        width: 240px;
        height: 320px;
        border: 1px solid;
        position: relative;
        filter: drop-shadow(2px 2px 6px rgba(0,0,0,.6));
}
.mama div { position: absolute; }
.ling1 {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 160px 60px;
        border-color: transparent olive olive transparent;
        transform: skewY(20deg);
}

.ling2 {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 160px 60px;
        border-color: transparent transparent deeppink deeppink;
        left: 120px;
        transform: skewY(-20deg);
}
.line {
        width:1px;
        height: 315px;
        background: silver;
        left: 50%;
        top: 26px;
        opacity: .8;
}

</style>

<div class="mama">
        <div class="ling1"></div>
        <div class="ling2"></div>
        <div class="line"></div>
</div>

马黑黑 发表于 2022-4-14 07:12

二楼是代码效果，不是图片

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

<p>我们把妈妈元素的边框去掉：<br></p>

<div class="mama" style="border-width: 0;">
        <div class="ling1"></div>
        <div class="ling2"></div>
        <div class="line"></div>
</div>

马黑黑 发表于 2022-4-14 07:19

感悟：

妈妈的伟大在于，前台给儿女们，后台是她的。儿女们的光鲜亮丽，是妈妈在后台发力的结果。不论儿女们在哪，妈妈都会永远在他们的身边。

樵歌 发表于 2022-4-14 07:20

看红影和队长哪个先做出来{:4_174:}

马黑黑 发表于 2022-4-14 07:39

樵歌 发表于 2022-4-14 07:20
看红影和队长哪个先做出来

都能做的，你也可以

红影 发表于 2022-4-14 10:03

漂亮的椎体，更漂亮的是黑黑幽默的语言，让学习变得如此有趣{:4_199:}

红影 发表于 2022-4-14 10:08

这个长宽比例设置得真好，变立体后像两个等腰三角形呢，实际之前它们是直角三角形。

红影 发表于 2022-4-14 10:12

前面还在想，如把两个直角三角形的斜边对接起来，应该也是椎体，但跟现在这个效果完全不同。

红影 发表于 2022-4-14 10:21

“给妈妈元素加个阴影，用 drop-shadow 滤镜比较简单，而且去掉妈妈元素的边框之后，阴影效果只作用于椎体部分”
好像平日用box阴影的时候比较多，很少用到这个呢。

看参考框，扭曲转点在下边线的中。

学习了{:4_187:}

梦油 发表于 2022-4-14 11:11

黑黑朋友真是一位诲人不倦的好老师。

马黑黑 发表于 2022-4-14 11:38

红影 发表于 2022-4-14 10:03
漂亮的椎体，更漂亮的是黑黑幽默的语言，让学习变得如此有趣

过奖了

马黑黑 发表于 2022-4-14 11:40

红影 发表于 2022-4-14 10:03
漂亮的椎体，更漂亮的是黑黑幽默的语言，让学习变得如此有趣

这是一定尺寸下扭曲后的功效吧

马黑黑 发表于 2022-4-14 11:41

红影 发表于 2022-4-14 10:21
“给妈妈元素加个阴影，用 drop-shadow 滤镜比较简单，而且去掉妈妈元素的边框之后，阴影效果只作用于椎体 ...

box-shadow在元素变形没有drop-shadow滤镜灵活

加林森 发表于 2022-4-14 12:08

来学习

红影 发表于 2022-4-15 09:57

马黑黑 发表于 2022-4-14 11:40
这是一定尺寸下扭曲后的功效吧

语言也有景深和扭曲？哈哈，这个说法好玩{:4_189:}

红影 发表于 2022-4-15 09:58

马黑黑 发表于 2022-4-14 11:41
box-shadow在元素变形没有drop-shadow滤镜灵活

哦哦，嗯，记下了{:4_187:}

樵歌 发表于 2022-4-15 10:42

马黑黑 发表于 2022-4-14 07:19
感悟：

妈妈的伟大在于，前台给儿女们，后台是她的。儿女们的光鲜亮丽，是妈妈在后台发力的结果。不论儿 ...

尾大的哲学家，真有黑马行空般妙语连珠{:4_189:}

马黑黑 发表于 2022-4-15 12:39

樵歌 发表于 2022-4-15 10:42
尾大的哲学家，真有黑马行空般妙语连珠

这黑人黑话也让你发现了

查看完整版本: 用CSS绘制棱椎体