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

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

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


当前回答

不同的方法:带变换旋转的CSS3三角形

使用这种技术很容易制作三角形。对于喜欢看动画来解释这项技术的人来说,这里是:

动画链接:如何制作CSS3三角形。和演示:使用变换旋转生成的CSS3三角形。

否则,这里将在4幕(这不是悲剧)中详细解释如何用一个元素制作等腰直角三角形。

注1:对于非等腰三角形和花哨的东西,您可以看到步骤4。注意2:在以下代码段中,不包括供应商前缀。它们包含在codepen演示中。注意3:以下解释的HTML始终是:<div class=“tr”></div>


步骤1:制作一个div

简单,只需确保宽度=1.41 x高度。您可以使用任何技术(参见此处),包括使用百分比和填充底部来保持纵横比并形成响应三角形。在下图中,div有一个金黄色的边框。

在那个div中,插入一个伪元素,并赋予它100%的父元素宽度和高度。伪元素在下图中具有蓝色背景。

此时,我们有了这个CSS:

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr: before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
}

第2步:让我们旋转

首先,最重要的是:定义变换原点。默认原点位于伪元素的中心,我们需要它位于左下角。通过将此CSS添加到伪元素:

变换原点:0 100%;或变换原点:左下;

现在我们可以通过变换将伪元素顺时针旋转45度:旋转(45度);

此时,我们有了这个CSS:

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0079C6;
    transform-origin: 0 100%;        
    transform: rotate(45deg);
}

第3步:隐藏它

要隐藏伪元素的不需要的部分(用黄色边框溢出div的所有部分),只需设置overflow:hidden;在容器上。去掉黄色边框后,你会。。。三角形!:

DEMO

CSS:

.tr {
    width: 30%;
    padding-bottom: 21.27%; /* = width / 1.41 */
    position: relative;
    overflow: hidden;
}

.tr:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0079C6;
    transform-origin: 0 100%;
    transform: rotate(45deg);
}

第4步:更进一步。。。

如演示所示,您可以自定义三角形:

通过玩sketchX()使它们变薄或变平。通过播放变换原点和旋转方向,使它们指向左、右或任何其他方向。使用3D变换属性进行一些反射。给出三角形边框在三角形内放置图像更多。。。释放CSS3的力量!


为什么要使用这种技术?

三角形很容易做出反应。你可以做一个带边框的三角形。可以保持三角形的边界。这意味着您只能在光标位于三角形内时触发悬停状态或单击事件。这在某些情况下会变得非常方便,比如每个三角形不能覆盖其邻居,因此每个三角形都有自己的悬停状态。你可以做出一些奇特的效果,比如反射。它将帮助您了解二维和三维变换财产。

为什么不使用此技术?

主要缺点是浏览器兼容性,IE9+支持2d转换财产,因此如果您计划支持IE8,则无法使用此技术。有关更多信息,请参阅CanIuse。对于一些使用3d变换的奇特效果,如反射浏览器支持IE10+(更多信息请参见canIuse)。你不需要任何响应性的东西,一个简单的三角形对你来说很好,那么你应该使用这里解释的边界技术:更好的浏览器兼容性和更容易理解,这要感谢这里的精彩文章。

其他回答

试试看:-

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

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

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

看看jsFiddle。

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

更进一步,使用基于此的css,我在上一个按钮和下一个按钮上添加了箭头(是的,我知道它不是100%跨浏览器,但仍然很流畅)。

.三角形{宽度:0;高度:0;左边框:50px实心透明;右边框:50px实心透明;边框底部:100px纯红色;边距:20px自动;}.向下三角形{边框底部:无;边框顶部:100px纯红色;}.左三角形{左侧边框:无;右边框:100px纯红色;边框底部:50px实心透明;边框顶部:50px实心透明;}.直角三角形{边界权:无;左边框:100px纯红色;边框底部:50px实心透明;边框顶部:50px实心透明;}.三角形后:后{宽度:0;高度:0;左侧边框:5px实心透明;右边框:5px实心透明;边框底部:5px纯红色;边距:0 5px;内容:“”;显示:内联块;}.右后三角:后{边界权:无;左侧边框:5px纯蓝色;边框底部:5px实心透明;边框顶部:5px实心透明;}前三角形:前{宽度:0;高度:0;左侧边框:5px实心透明;右边框:5px实心透明;边框底部:5px纯蓝色;边距:0 5px;内容:“”;显示:内联块;}.左前三角:前{左侧边框:无;右边框:5px纯蓝色;边框底部:5px实心透明;边框顶部:5px实心透明;}<div class=“triangle”></div><div class=“triangle triangle down”></div><div class=“triangle triangle left”></div><div class=“triangle triangle right”></div><a class=“triangle before triangle after left”href=“#”>返回</a><a class=“triangle after triangle”href=“#”>下一步</a>

剪辑路径对我来说效果最好-适用于具有和不具有固定尺寸的div/容器:

.triangleContainer{
    position: relative;
    width: 500px;
    height: 500px;
}

.triangleContainer::before{
    content: "";        
    position: absolute;
    background:blue;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

如果您想将边框应用于三角形,请阅读以下内容:使用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>