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

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

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


当前回答

假设我们有以下div:

<div id="triangle" />

现在逐步编辑CSS,这样您就可以清楚地了解周围发生了什么

步骤1:JSfiddle链接:

 #triangle {
        background: purple;
        width :150px;
        height:150PX;
        border-left: 50px solid black ;
        border-right: 50px solid black;
        border-bottom: 50px solid black;
        border-top: 50px solid black;
    }

这是一个简单的div,带有非常简单的CSS。所以外行人可以理解。Div的尺寸为150 x 150像素,边框为50像素。图像附于:

步骤2:JSfiddle链接:

#triangle {
    background: purple;
    width :150px;
    height:150PX;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

现在我刚刚更改了所有4个边的边框颜色。图像已附加。

步骤:3 JSfiddle链接:

#triangle {
    background: purple;
    width :0;
    height:0;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

现在我刚刚将div的高度和宽度从150像素更改为零。图像已附加

第4步:JSfiddle:

#triangle {
    background: purple;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

现在,我已经使所有边界都透明,除了底部边界。图像附在下面。

第5步:JSfiddle链接:

#triangle {
    background: white;
    width :0px;
    height:0px;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
    border-top: 50px solid transparent;
}

现在我把背景色改成了白色。图像已附加。

因此,我们得到了所需的三角形。

其他回答

好的,这个三角形将被创建,因为元素的边框在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>

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

不同的方法。具有线性梯度(对于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

更进一步,使用基于此的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>

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

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

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

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

试试看:-

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