马黑黑 发表于 2022-4-13 20:22

CSS：通过border画三角形妙招

<style>
.ling {
        margin: auto;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 60px 60px 120px 20px;
        border-color: red gray navy green;
}
</style>

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

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

<p><br>上面效果的CSS和HTML代码如下：</p><p><br></p><p>&lt;style&gt;</p><p>.ling {</p><p><span style="white-space:pre">        </span>margin: auto;</p><p><span style="white-space:pre">        </span>width: 0;</p><p><span style="white-space:pre">        </span>height: 0;</p><p><span style="white-space:pre">        </span>border-style: solid;</p><p><span style="white-space:pre">        </span>border-width: 60px 60px 120px 20px;</p><p><span style="white-space:pre">        </span>border-color: red gray navy green;</p><p>}</p><p>&lt;/style&gt;</p><p><br></p><p>&lt;div class="ling"&gt;&lt;/div&gt;</p><p><br></p><p>从CSS代码可以看出，盒子的宽高都为0，盒子的外观形态是通过&nbsp;border&nbsp;营造的——</p><p><br></p><p>① border-style&nbsp;定义边框样式，这里设置为实体线条&nbsp;solid；</p><p><br></p><p>② border-width&nbsp;定义边框宽度，这里，上60px、右60px、下120px、左20px；</p><p><br></p><p>③&nbsp;border-color 定义边框颜色，这里，上红、右灰、下军蓝、左绿。</p><p><br></p><p>现在，假如颜色改一下，只保留下边的军蓝色，其余设为透明&nbsp;transparent，情况会怎样？</p>

<div class="ling" style="border-color: transparent transparent navy transparent;"></div>

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

<div class="ling" style="border-width: 60px 60px 120px 0; border-color: transparent transparent navy transparent;"></div>
<p><br>Okey，就说这些，希望对大家有所启发。</p>

红影 发表于 2022-4-13 22:26

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

红影 发表于 2022-4-13 22:26

很有些立体的感觉呢，黑黑总能带来惊奇{:4_199:}

马黑黑 发表于 2022-4-13 22:35

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

恩，看需要来的

马黑黑 发表于 2022-4-13 22:36

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

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

加林森 发表于 2022-4-14 13:20

来学习

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

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

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

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

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

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

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

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

辛苦了哈

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

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

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

红影 发表于 2022-4-15 13:28

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

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

红影 发表于 2022-4-15 13:29

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

应该是黑黑辛苦了才是{:4_187:}

马黑黑 发表于 2022-4-15 17:58

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

都辛苦的

马黑黑 发表于 2022-4-15 17:58

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

数学基础也很重要

红影 发表于 2022-4-15 22:41

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

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

马黑黑 发表于 2022-4-15 22:46

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

还要有时间有精力

红影 发表于 2022-4-18 14:09

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

需要具备的条件真多呢{:4_173:}

马黑黑 发表于 2022-4-18 19:27

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

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

红影 发表于 2022-4-19 16:53

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

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

马黑黑 发表于 2022-4-19 18:08

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

有这种情况
页: [1] 2
查看完整版本: CSS：通过border画三角形妙招