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

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

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


当前回答

在阅读了这里的其他答案后,我发现对于CSS三角形的工作方式有很多很好的解释。我认为这是一种技巧,而不是一种可以通用的技巧。

为了便于阅读和维护,我建议您在SVG中定义几何图形。

然后,可以通过添加data:image/SVG+xml,前缀,使用data-uri转换SVG。作为一个数据uri,它现在可以用作CSS中的背景图像。因为SVG是纯文本的,所以您可以很容易地对几何图形、笔划和填充颜色进行更新。

第三节{宽度:100px;高度:100px;显示:内联块;背景图像:url('data:image/svg+xml,<svg xmlns=“http://www.w3.org/2000/svg“viewBox=”0 0 32 32“><path fill=”red“d=”M31.345 29H1.655L16.5 1.96z“/></svg>');}<div><div class=“tri”></div><div class=“tri”></div><div class=“tri”></div></div>

其他回答

试试看:-

.三角形{边框颜色:透明透明红色透明;边框样式:实心;边框宽度:0px 200px 200px;高度:0px;宽度:0px;}<div class=“triangle”></div>

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

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

看看jsFiddle。

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

使用剪辑路径:多边形(50%0%,100%100%,0%100%);用于创建简单的三角形

<div class="triangle"></div>

.triangle{width:200px; height:200px;background:#000;clip-path: polygon(50% 0%, 100% 100%, 0% 100%);}

不同的方法。具有线性梯度(对于IE,仅IE 10+)。您可以使用任何角度:

.三角形{边距:50px自动;宽度:100px;高度:100px;/*线性梯度*/背景:-moz线性梯度(-45deg,rgba(255,0,0,0)0%,rgba,255,0,0,50%,rgba)255,0,0,1,50%;/*FF3.6以上*/背景:-webkit渐变(线性、左上、右下、颜色停止(0%,rgba(255,0,0,0))、颜色停止器(50%,rgba)255,0,0,0))、色彩停止器(50%,rgba;/*铬,Safari4+*/背景:-webkit线性梯度(-45deg,rgba(255,0,0)0%,rgba,255,0,0,0,50%,rgba)255,0,0,1,50%;/*Chrome10+、Safari5.1+*/背景:o-linear-gradient(-45度,rgba(255,0,0)0%,rgba(2550,0,0)50%,rgba(255,00,1)50%;/*歌剧11.10+*/背景:-ms线性梯度(-45度,rgba(255,0,0)0%,rgba,255,0,0,0,50%,rgba)255,0,0,1,50%;/*即10+*/背景:线性梯度(135度,rgba(255,0,0)0%,rgba,255,0,0,0,50%,rgba)255,0,0,1,50%;/*W3C*/;}<div class=“triangle”></div>

这是jsfiddle

我知道这是一个旧的方法,但我想在讨论中补充一点,单独使用HTML和CSS创建三角形至少有5种不同的方法。

使用边框使用线性梯度使用圆锥梯度使用转换和溢出使用剪辑路径

我认为,除了方法3(使用圆锥曲线梯度)之外,这里已经介绍了所有内容,所以我将在这里分享:

.三角形{宽度:40px;高度:40px;背景:圆锥形梯度(50%50%,透明135度,绿色0,绿色225度,透明0);}<div class=“triangle”></div>