CSS三角形是如何工作的？

CSS技巧-CSS的形状有很多不同的CSS形状，我特别困惑于三角形：

#三角形向上{宽度：0；高度：0；左边框：50px实心透明；右边框：50px实心透明；边框底部：100px纯红色；}<div id=“triangle up”></div>

它是如何以及为什么工作的？

当前回答

现在完全不同了。。。

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

&#9650;

结果：

▲

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

2014-12-01 12:40:05

其他回答

其他人已经很好地解释了这一点。让我给你一个动画，它将快速解释这一点：http://codepen.io/chriscoyier/pen/lotjh

这里有一些代码供您使用和学习这些概念。

HTML格式：

<html>
  <body>
    <div id="border-demo">
    </div>
  </body>
</html>

CSS:

/*border-width is border thickness*/
#border-demo {
    background: gray;
    border-color: yellow blue red green;/*top right bottom left*/
    border-style: solid;
    border-width: 25px 25px 25px 25px;/*top right bottom left*/
    height: 50px;
    width: 50px;
}

玩这个，看看会发生什么。将高度和宽度设置为零。然后移除顶部边框并使左右透明，或者只需查看下面的代码以创建css三角形：

#border-demo {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
}

2015-12-14 02:05:23

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

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

看看jsFiddle。

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

2011-08-16 03:58:38

好的，这个三角形将被创建，因为元素的边框在HTML和CSS中一起工作的方式。。。

由于我们通常使用1或2px边框，我们从未注意到边框以相同的宽度彼此成45°角，如果宽度发生变化，角度也会发生变化，请运行我在下面创建的CSS代码：

.三角形{宽度：100px；高度：100px；左边框：50px实心黑色；右边框：50px实心黑色；边框底部：100px纯红色；}<div class=“triangle”></div>

然后在下一步中，我们没有任何宽度或高度，如下所示：

.三角形{宽度：0；高度：0；左边框：50px实心黑色；右边框：50px实心黑色；边框底部：100px纯红色；}<div class=“triangle”></div>

现在，我们使左边界和右边界不可见，以使理想的三角形如下所示：

.三角形{宽度：0；高度：0；左边框：50px实心透明；右边框：50px实心透明；边框底部：100px纯红色；}<div class=“triangle”></div>

如果您不愿意运行代码片段来查看步骤，我创建了一个图像序列，以查看一个图像中的所有步骤：

2017-06-17 04:04:47

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

常量大小=[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>

2019-12-14 18:25:59

这是一个老问题，但我认为值得分享如何使用这种三角形技术创建箭头。

步骤1：

让我们创建两个三角形，对于第二个，我们将使用：after伪类，并将其放置在另一个的正下方：

.箭头{宽度：0；高度：0；边框半径：50px；显示：内联块；位置：相对；}.arrow：在之后{内容：“”；宽度：0；高度：0；位置：绝对；}.向上箭头{左边框：50px实心透明；右边框：50px实心透明；边框底部：50px实心#333；}.向上箭头：之后{顶部：5px；左边框：50px实心透明；右边框：50px实心透明；边框底部：50px实心#ccc；右：-50px；}<div class=“arrow arrow up”></div>

步骤2

现在，我们只需将第二个三角形的主要边界颜色设置为与背景相同的颜色：

.箭头{宽度：0；高度：0；边框半径：50px；显示：内联块；位置：相对；}.arrow：在之后{内容：“”；宽度：0；高度：0；位置：绝对；}.向上箭头{左边框：50px实心透明；右边框：50px实心透明；边框底部：50px实心#333；}.向上箭头：之后{顶部：5px；左边框：50px实心透明；右边框：50px实心透明；边框底部：50px实心#fff；右：-50px；}<div class=“arrow arrow up”></div>

摆弄所有箭头：http://jsfiddle.net/tomsarduy/r0zksgeu/

2015-07-31 20:42:55

CSS三角形是如何工作的？

推荐文章

最新文章

标签