CSS：通过border画三角形妙招

马黑黑

妙招与否其实是次要的，本帖主要是为了展示思路灵活的重要性，就是说，即使只是通过border属性的设置来画三角形，方式也是多样的。先看看如下的效果：

上面效果的CSS和HTML代码如下：

<style>

.ling {

margin: auto;

width: 0;

height: 0;

border-style: solid;

border-width: 60px 60px 120px 20px;

border-color: red gray navy green;

}

</style>

<div class="ling"></div>

从CSS代码可以看出，盒子的宽高都为0，盒子的外观形态是通过 border 营造的——

① border-style 定义边框样式，这里设置为实体线条 solid；

② border-width 定义边框宽度，这里，上60px、右60px、下120px、左20px；

③ border-color 定义边框颜色，这里，上红、右灰、下军蓝、左绿。

现在，假如颜色改一下，只保留下边的军蓝色，其余设为透明 transparent，情况会怎样？

没错，就是前例里面的军蓝色三角形。现在，我想要一个直角在左下的直角三角形，在上面的基础上如何操作？简单的，把绿色区域所对应的 border 宽度设置为0，原来的 border-width: 60px 60px 120px 20px; 改为 border-width: 60px 60px 120px 0; 便可：

Okey，就说这些，希望对大家有所启发。

红影

原来还可以这样，想起来以前的那个三角模拟的光柱，只留一个方向，其他的全设置为透明。
原来全设颜色，也很好看呢

红影

很有些立体的感觉呢，黑黑总能带来惊奇

马黑黑

红影 发表于 2022-4-13 22:26
原来还可以这样，想起来以前的那个三角模拟的光柱，只留一个方向，其他的全设置为透明。
原来全设颜色，也 ...

恩，看需要来的

马黑黑

红影 发表于 2022-4-13 22:26
很有些立体的感觉呢，黑黑总能带来惊奇

这些都不是什么奇特的东西，知识想到没有

加林森

来学习

红影

马黑黑 发表于 2022-4-13 22:35
恩，看需要来的

只是border的相关数据和颜色的设置，就能有这么多效果，真的非常有趣呢

红影

马黑黑 发表于 2022-4-13 22:36
这些都不是什么奇特的东西，知识想到没有

是的，不是新知识，你之前就讲过的。这次更拓展了一下

马黑黑

红影 发表于 2022-4-15 09:41
是的，不是新知识，你之前就讲过的。这次更拓展了一下

辛苦了哈

马黑黑

红影 发表于 2022-4-15 09:40
只是border的相关数据和颜色的设置，就能有这么多效果，真的非常有趣呢

空间思维好的话一下子较能设计好各种形状

红影

马黑黑 发表于 2022-4-15 12:42
空间思维好的话一下子较能设计好各种形状

是的，这个很需要空间想象力。

红影

马黑黑 发表于 2022-4-15 12:41
辛苦了哈

应该是黑黑辛苦了才是

马黑黑

红影 发表于 2022-4-15 13:29
应该是黑黑辛苦了才是

都辛苦的

马黑黑

红影 发表于 2022-4-15 13:28
是的，这个很需要空间想象力。

数学基础也很重要

红影

马黑黑 发表于 2022-4-15 17:58
数学基础也很重要

是的，需要数学基础、空间想象力和代码知识，要三者都具备。

马黑黑

红影 发表于 2022-4-15 22:41
是的，需要数学基础、空间想象力和代码知识，要三者都具备。

还要有时间有精力

红影

马黑黑 发表于 2022-4-15 22:46
还要有时间有精力

需要具备的条件真多呢

马黑黑

红影 发表于 2022-4-18 14:09
需要具备的条件真多呢

那必须的，不能随随便便的

红影

马黑黑 发表于 2022-4-18 19:27
那必须的，不能随随便便的

也许有的时候妙手偶得呢，不太了解也能弄出好的来

马黑黑

红影 发表于 2022-4-19 16:53
也许有的时候妙手偶得呢，不太了解也能弄出好的来

有这种情况