利用border属性绘制三角形

马黑黑

我们先来看看一个有边框的 100*100 的盒子：

边框颜色顺序：
红 灰 橄榄 蓝

边框颜色每一条都不同，这是用了 border-color 属性设定的，句法为 border-color: 颜色1 颜色2 颜色3 颜色4，对应于 上、右、下、左 四个方向。颜色值中有一个重要的颜色是颜色表中没有的，那就是 transparent，透明色。任意一个边框设置为透明色，该边框就不可见:

但这和绘制三角形有关系吗？还真有，思路是把盒子设为宽高都为0，border宽度设为100px并设定好每条边框的颜色，就可构建出三角形来。先看效果：

上面盒子的CSS设定：

    border: 100px solid;
    border-color: transparent transparent teal transparent;

边框尺寸设置为100px，底边边框颜色为青色（teal），其余三个边框均为透明色，得出正向的等腰三角形。盒子形状是被边框颜色所填充，原因是盒子没有尺寸只有边框，边框是什么颜色盒子就是什么颜色。四条边框，哪一条是实体颜色，三角形的最长边就在它那个方向，比方说，要画出最长边在右边的三角形，那么就把第二个边框颜色设置为实体色，其余透明。

如果要画直角三角形怎么做？相邻两条边不透明即可：

要画非等腰三角形的呢？这需要单独设置上、右、下、左边框的宽度尺寸：

上例CSS基于边框的代码如下：

border: 1px solid;
border-width: 100px 30px 90px 70px;
border-color: transparent transparent teal transparent;

先设定边框为 1px + 实线，接着再设定每条边的宽度，最后设定底边边框为青色其余透明。

【划重点】通过边框的设定绘制三角形，盒子宽高尺寸设为0，用边框尺寸及其颜色来渲染盒子形态。三角形的底部朝哪个方向，就将该方向的边框设为实体颜色，其余边框为透明色；画直角三角形，两两相邻的边框设为实体色；画非等腰三角形，需要设置每条边框的宽度为不同的尺寸。

马黑黑

给出更多的示例，代码在后面的回复中。观察这些示例中三角形在外框中的具体位置有助于理解更多的东西：

马黑黑

1. <style>
   
2.         .triangle { margin: 10px; width: 0; height: 0; border: 50px solid; position: relative; }
   
3.         .triangle::after { content: ''; position: absolute; width: 104px; height: 104px; left: -52px; top: -52px; border: 1px solid tan; }
   
4.         .to-up { border-color: transparent transparent teal transparent; }
   
5.         .to-right { border-color: transparent transparent transparent teal; }
   
6.         .to-down { border-color: teal transparent transparent transparent; }
   
7.         .to-left { border-color: transparent teal transparent transparent; }
   
8.         .right-up { border-color: transparent transparent teal teal; }
   
9.         .r-angle1 { border-color: transparent transparent teal teal; }
   
10.         .r-angle2 { border-color: teal transparent transparent teal; }
    
11.         .r-angle3 { border-color: teal teal transparent transparent; }
    
12.         .r-angle4 { border-color: transparent teal teal transparent; }
    
13. </style>
    
14. 
    
15. <div class="triangle to-up"></div>
    
16. <div class="triangle to-right"></div>
    
17. <div class="triangle to-down"></div>
    
18. <div class="triangle to-left"></div>
    
19. <div class="triangle r-angle1"></div>
    
20. <div class="triangle r-angle2"></div>
    
21. <div class="triangle r-angle3"></div>
    
22. <div class="triangle r-angle4"></div>

复制代码

红影

这个功能挺神奇，用边框尺寸及其颜色来渲染盒子形态，就能得到不同形状。

红影

我明白了，你前面一个帖子用transform: scale(50,1.2);就把正三角形拉成了光柱。
嗯嗯，现在也知道怎样去修改那个光柱的长度了

红影

如果那个光柱放左上角，不修改长度也没事，应该不会长到让底部的拉条也发生变化了，只会让纵向被影响，最多无法评分

马黑黑

红影 发表于 2022-4-6 14:28
我明白了，你前面一个帖子用transform: scale(50,1.2);就把正三角形拉成了光柱。
嗯嗯，现在也知道怎样去 ...

这个看出来了，很不错

马黑黑

红影 发表于 2022-4-6 14:30
如果那个光柱放左上角，不修改长度也没事，应该不会长到让底部的拉条也发生变化了，只会让纵向被影响，最多 ...

评分是可以的，因为它运动着，不会老盖住评分链接

马黑黑

红影 发表于 2022-4-6 14:22
这个功能挺神奇，用边框尺寸及其颜色来渲染盒子形态，就能得到不同形状。

画三角形还可以用角向渐变

红影

马黑黑 发表于 2022-4-6 15:00
这个看出来了，很不错

现在还没看出来那个灯柱自身是怎样定位的。

红影

马黑黑 发表于 2022-4-6 15:19
评分是可以的，因为它运动着，不会老盖住评分链接

哦哦，对的。

红影

马黑黑 发表于 2022-4-6 15:20
画三角形还可以用角向渐变

这个一下子还想不出是怎么弄的。渐变啊怎么去汇单一色的三角呢。

马黑黑

红影 发表于 2022-4-6 22:16
这个一下子还想不出是怎么弄的。渐变啊怎么去汇单一色的三角呢。

这个需要对 conic-gradient 有透彻的理解，不难的

马黑黑

红影 发表于 2022-4-6 22:15
现在还没看出来那个灯柱自身是怎样定位的。

嗯，transform-origin是比较抽象。给运动元素事先定位，以便好确定将来运动的基点，是常规做法。

红影

马黑黑 发表于 2022-4-7 07:07
这个需要对 conic-gradient 有透彻的理解，不难的

现在对它理解得还不透呀

红影

马黑黑 发表于 2022-4-7 07:09
嗯，transform-origin是比较抽象。给运动元素事先定位，以便好确定将来运动的基点，是常规做法。

可能说的是两件事，一个是转动基点定位，一个是基点在总图里的定位。

马黑黑

红影 发表于 2022-4-7 13:41
可能说的是两件事，一个是转动基点定位，一个是基点在总图里的定位。

不完全是这样。

弧形运动是有半径的，难点之一首先是如何确定半径，之二是如何确定基点。基点与半径的计算，均与元素未发起运动时的定位有关，还与父元素以及自身的尺寸有关。总的说来，综合考虑的因素极多极复杂，有些情形下很难把握。

马黑黑

红影 发表于 2022-4-7 13:40
现在对它理解得还不透呀

嗯，这是需要结合尺寸与角度进行计算，比用border的难一点，试看一个例子：

.sanj {
        width: 200px;
        height: 100px;
        background: conic-gradient(from 90deg at 50% 0, transparent 0, transparent 45deg, deeppink 45.1deg, deeppink 135deg, transparent 1deg);
}

<div class="sjnj"></div>

红影

马黑黑 发表于 2022-4-7 13:56
不完全是这样。

弧形运动是有半径的，难点之一首先是如何确定半径，之二是如何确定基点。基点与半径的 ...

居然这么复杂，我还以为只要把摇动的物体当作刚体，把重心移动一下就可以了呢。

红影

试了一下，什么也没看到。 哦，是文件名和css不一样，嗯，看到了是个三角。