CSS三角：五幕悲剧

正如亚历克斯所说，等宽的边界以45度角相互对接：

如果没有上边框，则如下所示：

然后你给它0的宽度。。。

…高度为0。。。

…最后，使两个侧边透明：

这就形成了一个三角形。

边框在相交处使用有角度的边（与等宽边框成45°角，但更改边框宽度可能会扭曲角度）。

第二部分{宽度：60px；边框宽度：30px；边框颜色：红蓝绿黄；边框样式：实心；}<div></div>

看看jsFiddle。

通过隐藏某些边界，您可以获得三角形效果（正如您在上面看到的，通过使不同部分的颜色不同）。透明经常被用作边缘颜色以获得三角形形状。

现在完全不同了。。。

不要忘记像html实体这样简单的解决方案，而不要使用css技巧：

▲

结果：

▲

请参见：上下三角形的HTML实体是什么？

如果你想改变边框大小、宽度和高度，看看它们如何创建不同的形状，请尝试以下操作：

常量大小=[32，32，32，32]；const triangle=document.getElementById（'triangle'）；函数更新（｛target｝）{让索引=空；if（目标）{index=parseInt（target.id）；if（！isNaN（索引））{sizes[index]=目标值；}}window.requestAnimationFrame（（）=>{triangle.style.borderWidth=sizes.map（size=>`${size}px`）.join（“”）；if（isNaN（索引））{triangle.style[target.id]=`${target.value}px`；}});}document.querySelectorAll（'input'）.forEach（input=>{input.oninput=更新；});更新（｛｝）；正文{边距：0；最小高度：100vh；显示：柔性；对齐内容：中心；对齐项目：居中；溢出：隐藏；}#三角形{边框样式：实心；边框颜色：黄-品红-蓝-黑；背景：青色；高度：0px；宽度：0px；}#控件{位置：固定；底部：0；左：0；右：0；背景：白色；显示：柔性；方框阴影：0 0 32px rgba（0，0，0、.125）；}#控件>div{位置：相对；宽度：25%；填充：8px；框大小调整：边框框；显示：柔性；}输入{边距：0；宽度：100%；位置：相对；}<div id=“triangle”style=“border width:32px 32px 32px；”></div><div id=“controls”><div><input-type=“range”min=“0”max=“128”value=“32”id=“0”/></div><div><input-type=“range”min=“0”max=“128”value=“32”id=“1”/></div><div><input-type=“range”min=“0”max=“128”value=“32”id=“2”/></div><div><input-type=“range”min=“0”max=“128”value=“32”id=“3”/></div><div><input-type=“range”min=“0”max=“128”value=“0“id=“width”/></div><div><input-type=“range”min=“0”max=“128”value=“0“id=“height”/></div></div>

CSS三角：五幕悲剧

正如亚历克斯所说，等宽的边界以45度角相互对接：

如果没有上边框，则如下所示：

然后你给它0的宽度。。。

…高度为0。。。

…最后，使两个侧边透明：

这就形成了一个三角形。

如果您想将边框应用于三角形，请阅读以下内容：使用CSS创建三角形？

几乎所有的答案都集中在使用边界构建的三角形上，所以我将详细介绍线性梯度方法（从@lima_fil的答案开始）。

使用像45°这样的度数值将迫使我们遵守特定的高度/宽度比，以获得我们想要的三角形，这不会是响应性的：

.tri三{宽度：100px；高度：100px；背景：线性梯度（45度，透明49.5%，红色50%）；/*为了说明*/边框：1px实心；}很好<div class=“tri”></div>坏的一个<div class=“tri”style=“width:150px”></div>坏的一个<div class=“tri”style=“height:30px”></div>

相反，我们应该考虑预定义的方向值，如底部、顶部等。在这种情况下，我们可以获得任何类型的三角形，同时保持其响应。

1） 矩形三角形

为了获得这样的三角形，我们需要一个线性梯度和一个对角线方向，如从右下角、从左上角、从右下等

三-1，三-2{显示：内联块；宽度：100px；高度：100px；背景：线性渐变（到左下角，透明49.5%，红色50%）；边框：1px实心；动画：更改2s线性无限交替；}.三-2{背景：线性渐变（到右上角，透明49.5%，红色50%）；边框：无；}@关键帧更改{来自{宽度：100px；高度：100px；}至{高度：50px；宽度：180px；}}<div class=“tri-1”></div><div class=“tri-2”></div>

2） 等腰三角形

对于这一个，我们将需要2个像上面一样的线性梯度，每个梯度将占宽度（或高度）的一半。就像我们创建了第一个三角形的镜像。

.tri三{显示：内联块；宽度：100px；高度：100px；背景图像：线性梯度（至右下角，透明49.5%，红色50%），线性梯度（至左下方，透明49.5%，红色50%）；背景大小：50.3%100%；/*我使用一个略大于50%的值，以避免两个梯度之间的小间隙*/背景位置：左、右；背景重复：无重复；动画：更改2s线性无限交替；}@关键帧更改{来自{宽度：100px；高度：100px；}至{高度：50px；宽度：180px；}}<div class=“tri”></div>

3） 等边三角形

这个处理起来有点棘手，因为我们需要保持渐变的高度和宽度之间的关系。我们将使用与上述相同的三角形，但为了将等腰三角形转换为等边三角形，我们将使计算更加复杂。

为了方便起见，我们将考虑到div的宽度是已知的，并且高度足够大，可以在内部绘制三角形（height>=width）。

我们有两个梯度g1和g2，蓝色线是divw的宽度，每个梯度都有50%的宽度（w/2），三角形的每一边都等于w。绿色线是两个梯度hg的高度，我们可以很容易地得到以下公式：

（w/2）²+hg²=w²--->hg=（sqrt（3）/2）*w--->hg=0.866*w

我们可以依靠calc（）进行计算并获得所需的结果：

.tri三{--w： 100像素；宽度：var（--w）；高度：100px；显示：内联块；背景图像：线性梯度（至右下角，透明49.5%，红色50%），线性梯度（至左下方，透明49.5%，红色50%）；背景大小：calc（var（--w）/2+0.5px）calc（0.866*var（--w））；背景位置：左下、右下；背景重复：无重复；}<div class=“tri”></div><div class=“tri”style=“--w:80px”></div><div class=“tri”style=“--w:50px”></div>

另一种方法是控制div的高度，并保持渐变的语法简单：

.tri三{--w： 100像素；宽度：var（--w）；高度：计算值（0.866*var（--w））；显示：内联块；背景：线性梯度（至右下，透明49.8%，红色50%）向左，线性梯度（至左下，透明49.8%，红色50%）；背景尺寸：50.2%100%；背景重复：无重复；}<div class=“tri”></div><div class=“tri”style=“--w:80px”></div><div class=“tri”style=“--w:50px”></div>

4） 随机三角形

要获得一个随机三角形，很容易，因为我们只需要删除每个三角形的50%的条件，但我们应该保持两个条件（两个条件都应该具有相同的高度，两个宽度的总和应该是100%）。

.三-1{宽度：100px；高度：100px；显示：内联块；背景图像：线性梯度（至右下角，透明50%，红色0），线性梯度（至左下角，透明50%，红色0）；背景尺寸：20%60%，80%-60%；背景位置：左下、右下；背景重复：无重复；}<div class=“tri-1”></div>

但如果我们想为每一侧定义一个值呢？我们只需要再次计算！

让我们将hg1和hg2定义为渐变的高度（两者都等于红线），然后将wg1和wg2定义为梯度的宽度（wg1+wg2=a）。我不会详细说明计算，但在最后我们将得到：

wg2 = (a²+c²-b²)/(2a)
wg1 = a - wg2
hg1 = hg2 = sqrt(b² - wg1²) = sqrt(c² - wg2²)

现在我们已经达到了CSS的极限，因为即使使用calc（），我们也无法实现这一点，所以我们只需要手动收集最终结果并将其作为固定大小使用：

.tri三{--wg1:20px；--wg2:60px；--汞：30像素；宽度：calc（var（--wg1）+var（--wg2））；高度：100px；显示：内联块；背景图像：线性梯度（至右下角，透明49.5%，红色50%），线性梯度（至左下方，透明49.5%，红色50%）；背景大小：var（--wg1）var（--hg），var（--wg2）var（-hg）；背景位置：左下、右下；背景重复：无重复；}<div class=“tri”></div><div class=“tri”style=“--wg1:80px；--wg2:60px；--hg:100px；”></div>

奖金

我们不应该忘记，我们也可以应用旋转和/或倾斜，我们有更多的选择来获得更多的三角形：

.tri三{--wg1:20px；--wg2:60px；--汞：30像素；宽度：calc（var（--wg1）+var（--wg2）-0.5px）；高度：100px；显示：内联块；背景图像：线性梯度（至右下角，透明49%，红色50%），线性梯度（至左下角，透明49%，红色50%）；背景大小：var（--wg1）var（--hg），var（--wg2）var（-hg）；背景位置：左下、右下；背景重复：无重复；}<div class=“tri”></div><div class=“tri”style=“transform:偏斜Y（25deg）”></div><div class=“tri”style=“--wg1:80px；--wg2:60px；--hg:100px；”></div><div class=“tri”style=“--wg1:80px；--wg2:60px；--hg:100px；transform:rotate（20deg）”></div>

当然，我们应该记住SVG解决方案，它在某些情况下更适合：

svg公司{宽度：100px；高度：100px；}多边形{填充：红色；}<svg viewBox=“0 0 100 100”><多边形点=“0100 0,0 100100”/></svg><svg viewBox=“0 0 100 100”><多边形点=“0100 50，0 100100”/></svg><svg viewBox=“0 0 100 100”><多边形点=“0100 50，23 100100”/></svg><svg viewBox=“0 0 100 100”><多边形点=“20，60 50，43 80100”/></svg>