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

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

其他回答

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

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

看看jsFiddle。

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

现在完全不同了。。。

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

&#9650;

结果:

请参见:上下三角形的HTML实体是什么?

CSS三角:五幕悲剧

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

如果没有上边框,则如下所示:

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

…高度为0。。。

…最后,使两个侧边透明:

这就形成了一个三角形。

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

不同的方法:带变换旋转的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)。你不需要任何响应性的东西,一个简单的三角形对你来说很好,那么你应该使用这里解释的边界技术:更好的浏览器兼容性和更容易理解,这要感谢这里的精彩文章。