利用border属性绘制三角形
本帖最后由 马黑黑 于 2022-4-6 12:15 编辑 <br /><br /><style>.mnDiv p{ padding: 10px 0; }
.showDiv { margin: auto; padding: 8px; width: 100px; height: 100px; border: 1px solid; }
</style>
<div class="mnDiv">
<p>我们先来看看一个有边框的 100*100 的盒子：</p>
<div class="showDiv" style="border-color: red gray olive blue;">边框颜色顺序：<br><font color="#ff0000">红</font> <font color="#808080">灰</font> <font color="#808000">橄榄</font> <font color="#0000ff">蓝</font></div>
<p>边框颜色每一条都不同，这是用了 border-color 属性设定的，句法为<font color="#8b0000"> border-color: 颜色1 颜色2 颜色3 颜色4</font>，对应于 上、右、下、左 四个方向。颜色值中有一个重要的颜色是颜色表中没有的，那就是 transparent，透明色。任意一个边框设置为透明色，该边框就不可见:</p>
<div class="showDiv" style="border-top-color: transparent;"></div>
<p>但这和绘制三角形有关系吗？还真有，思路是把盒子设为宽高都为0，border宽度设为100px并设定好每条边框的颜色，就可构建出三角形来。先看效果：</p>
<div class="showDiv" style="padding: 0; width: 0; height: 0; border: 100px solid; border-color: transparent transparent teal transparent;"></div>
<p>上面盒子的CSS设定：</p>
<p> border: 100px solid;<br> border-color: transparent transparent teal transparent;</p><p>边框尺寸设置为100px，底边边框颜色为青色（teal），其余三个边框均为透明色，得出正向的等腰三角形。盒子形状是被边框颜色所填充，原因是盒子没有尺寸只有边框，边框是什么颜色盒子就是什么颜色。四条边框，哪一条是实体颜色，三角形的最长边就在它那个方向，比方说，要画出最长边在右边的三角形，那么就把第二个边框颜色设置为实体色，其余透明。</p><p>如果要画直角三角形怎么做？相邻两条边不透明即可：</p>
<div class="showDiv" style="padding: 0; width: 0; height: 0; border: 100px solid; border-color: transparent transparent teal teal;"></div>
<p>要画非等腰三角形的呢？这需要单独设置上、右、下、左边框的宽度尺寸：</p>
<div class="showDiv" style="padding: 0; width: 0; height: 0; border: 1px solid; border-width: 100px 30px 90px 70px; border-color: transparent transparent teal transparent;"></div>
<p>上例CSS基于边框的代码如下：</p><p>border: 1px solid;<br>border-width: 100px 30px 90px 70px;<br>border-color: transparent transparent teal transparent;</p><p>先设定边框为 1px + 实线，接着再设定每条边的宽度，最后设定底边边框为青色其余透明。</p><p>【划重点】通过边框的设定绘制三角形，盒子宽高尺寸设为0，用边框尺寸及其颜色来渲染盒子形态。三角形的底部朝哪个方向，就将该方向的边框设为实体颜色，其余边框为透明色；画直角三角形，两两相邻的边框设为实体色；画非等腰三角形，需要设置每条边框的宽度为不同的尺寸。</p>
</div> <style>
.triangle { margin: 10px; width: 0; height: 0; border: 50px solid; position: relative; }
.triangle::after { content: ''; position: absolute; width: 104px; height: 104px; left: -52px; top: -52px; border: 1px solid tan; }
.to-up { border-color: transparent transparent teal transparent; }
.to-right { border-color: transparent transparent transparent teal; }
.to-down { border-color: teal transparent transparent transparent; }
.to-left { border-color: transparent teal transparent transparent; }
.right-up { border-color: transparent transparent teal teal; }
.r-angle1 { border-color: transparent transparent teal teal; }
.r-angle2 { border-color: teal transparent transparent teal; }
.r-angle3 { border-color: teal teal transparent transparent; }
.r-angle4 { border-color: transparent teal teal transparent; }
</style>
<p>给出更多的示例，代码在后面的回复中。观察这些示例中三角形在外框中的具体位置有助于理解更多的东西：</p>
<div class="triangle to-up"></div>
<div class="triangle to-right"></div>
<div class="triangle to-down"></div>
<div class="triangle to-left"></div>
<div class="triangle r-angle1"></div>
<div class="triangle r-angle2"></div>
<div class="triangle r-angle3"></div>
<div class="triangle r-angle4"></div>
<style>
.triangle { margin: 10px; width: 0; height: 0; border: 50px solid; position: relative; }
.triangle::after { content: ''; position: absolute; width: 104px; height: 104px; left: -52px; top: -52px; border: 1px solid tan; }
.to-up { border-color: transparent transparent teal transparent; }
.to-right { border-color: transparent transparent transparent teal; }
.to-down { border-color: teal transparent transparent transparent; }
.to-left { border-color: transparent teal transparent transparent; }
.right-up { border-color: transparent transparent teal teal; }
.r-angle1 { border-color: transparent transparent teal teal; }
.r-angle2 { border-color: teal transparent transparent teal; }
.r-angle3 { border-color: teal teal transparent transparent; }
.r-angle4 { border-color: transparent teal teal transparent; }
</style>
<div class="triangle to-up"></div>
<div class="triangle to-right"></div>
<div class="triangle to-down"></div>
<div class="triangle to-left"></div>
<div class="triangle r-angle1"></div>
<div class="triangle r-angle2"></div>
<div class="triangle r-angle3"></div>
<div class="triangle r-angle4"></div>
这个功能挺神奇，用边框尺寸及其颜色来渲染盒子形态，就能得到不同形状。{:4_199:} 我明白了，你前面一个帖子用transform: scale(50,1.2);就把正三角形拉成了光柱。
嗯嗯，现在也知道怎样去修改那个光柱的长度了{:4_173:} 如果那个光柱放左上角，不修改长度也没事，应该不会长到让底部的拉条也发生变化了，只会让纵向被影响，最多无法评分{:4_173:} 红影 发表于 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 有透彻的理解，不难的
现在对它理解得还不透呀{:4_173:} 马黑黑 发表于 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不一样，嗯，看到了是个三角。
页:
[1]
2