CSS 三角形如何工作?

CSS 技巧中有很多不同的 CSS 形状-CSS 的形状,我尤其对三角形感到困惑:

CSS三角形

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}
<div id="triangle-up"></div>

它如何以及为什么起作用?

答案

CSS 三角:五幕悲剧

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

边界以45度角相遇,内容在中间

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

没有顶部边框

然后将其宽度设置为 0 ...

没有宽度

... 高度为 0 ...

也没有高度

... 最后,使两个侧面边框透明:

透明的侧边框

产生一个三角形。

边界在其相交处使用倾斜的边缘(边界宽度相等的 45° 角,但是更改边界宽度会倾斜该角度)。

边框示例

jsFiddle

通过隐藏某些边框,您可以获得三角形效果(如上所示,通过将不同的部分设置为不同的颜色)。 transparent通常用作实现三角形形状的边缘颜色。

从基本的正方形和边框开始。每个边框将被赋予不同的颜色,因此我们可以区分它们:

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 200px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

这给你这个

四个边界的正方形

但是不需要顶部边框,因此将其宽度设置为0px 。现在,我们200px边框底部将使我们的三角形高 200px。

.triangle {
    border-color: yellow blue red green;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

我们会得到这个

带有四个边框的正方形的下半部分

然后,要隐藏两个边三角形,请将 border-color 设置为透明。由于已有效删除了 top-border,因此我们也可以将 border-top-color 设置为透明。

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

最终我们得到这个

三角形底边框

不同的方法:

具有转换功能的CSS3 三角形

使用此技术很容易制作出三角形形状。对于喜欢看动画解释此技术原理的人来说,它是:

gif动画:如何使带有变换的三角形旋转

否则,这里将详细说明如何用一个元素制作等腰直角三角形的 4 个动作(这不是悲剧)。

  • 注意 1:对于非等腰三角形和奇特的东西,您可以参阅第 4 步
  • 注意 2:在以下代码段中,不包括供应商前缀。它们包含在codepen 演示中
  • 注 3:用于以下说明的 HTML 始终为: <div class="tr"></div>

步骤 1:进行 div

容易,只需确保width = 1.41 x height 。您可以使用任何技巧( 请参见此处 ),包括使用百分比和底部填充来保持长宽比并创建一个自适应三角形 。在下图中,div 具有金黄色边框。

在该 div 中,插入一个伪元素,并为其提供 100%的父级宽度和高度。下图中的伪元素具有蓝色背景。

使用transform roate制作CSS三角形的步骤1

至此,我们有了这个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添加到伪元素中:

transform-origin:0 100%;transform-origin: left bottom;

现在我们可以使用transform : rotate(45deg);将伪元素顺时针旋转 45 度transform : rotate(45deg);

使用CSS3步骤2创建三角形

至此,我们有了这个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;在容器上。删除黄色边框后,您会得到... 三角形 ! :

演示

CSS三角形

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:进一步...

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

  1. 通过玩skewX()使它们更薄或更平坦。
  2. 通过播放转换方向和旋转方向使它们指向左,右或任何其他方向。
  3. 使用 3D 变换属性进行一些反射
  4. 三角形边框
  5. 将图像放在三角形内
  6. 还有更多... 释放CSS3 的强大功能

为什么要使用这种技术?

  1. 三角形可以轻松响应。
  2. 您可以制作一个带边框三角形
  3. 您可以保持三角形的边界。这意味着仅当光标位于三角形内部时,才可以触发悬停状态或单击事件。在像这样的情况下,这变得非常方便,在这种情况下,每个三角形都无法覆盖其邻居,因此每个三角形都有自己的悬停状态。
  4. 您可以制作一些奇特的效果,例如反射
  5. 它将帮助您了解 2d 和 3d 变换属性。

为什么不使用这种技术?

  1. 主要缺点是浏览器兼容性 ,IE9 + 支持 2d 转换属性,因此,如果计划支持 IE8,则不能使用此技术。有关更多信息,请参见CanIuse 。对于某些使用 3d 变换的奇特效果,例如反射浏览器支持为 IE10 +(有关更多信息,请参见canIuse )。
  2. 您不需要任何响应,并且普通三角形适合您,那么您应该采用此处说明的边框技术:更好的浏览器兼容性和易于理解的感谢(感谢此处引人入胜的帖子)。

这是我为演示而创建的JSFiddle 中动画

另请参见下面的代码段。

这是由截屏视频制作的 GIF 动画

三角形的Gif动画

transforms = [
         {'border-left-width'   :'30', 'margin-left': '70'},
         {'border-bottom-width' :'80'},
         {'border-right-width'  :'30'},
         {'border-top-width'    :'0', 'margin-top': '70'},
         {'width'               :'0'},
         {'height'              :'0', 'margin-top': '120'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];


$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))
.border {
    margin: 20px 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>


随机版本

/**
 * Randomize array element order in-place.
 * Using Durstenfeld shuffle algorithm.
 */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
    return array;
}

transforms = [
         {'border-left-width'   :'30', 'margin-left': '70'},
         {'border-bottom-width' :'80'},
         {'border-right-width'  :'30'},
         {'border-top-width'    :'0', 'margin-top': '70'},
         {'width'               :'0'},
         {'height'              :'0'},
         {'borderLeftColor'     :'transparent'},
         {'borderRightColor'    :'transparent'}
];
transforms = shuffleArray(transforms)



$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
		  for ( var i=0; i < transforms.length; i++ ) {
        $(this)
         .animate(transforms[i], duration)
		  }
    }).end()
}(jQuery))
.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></div>


一次全部版本

$('#a').click(function() {$('.border').trigger("click");});
(function($) {
    var duration = 1000
    $('.border').click(function() {
        $(this)
         .animate({'border-top-width': 0            ,
         					 'border-left-width': 30          ,
         					 'border-right-width': 30         ,
         					 'border-bottom-width': 80        ,
         					 'width': 0                       ,
         					 'height': 0                      ,
                   'margin-left': 100,
                   'margin-top': 150,
         					 'borderTopColor': 'transparent',
         					 'borderRightColor': 'transparent',
         					 'borderLeftColor':  'transparent'}, duration)
    }).end()
}(jQuery))
.border {
    margin: 50px;
    width: 50px;
    height: 50px;
    border-width: 50px;
    border-style: solid;
    border-top-color: green;
    border-right-color: yellow;
    border-bottom-color: red;
    border-left-color: blue;
    cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.min.js"></script>
Click it!<br>
<div class="border"></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;
}

现在,我只是将背景色更改为白色。图像已附加。

在此处输入图片说明

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

现在完全不同了...

除了使用 CSS 技巧外,别忘了像 html 实体这样简单的解决方案:

&#9650;

结果:

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

考虑下面的三角形

.triangle {
    border-bottom:15px solid #000;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    width:0;
    height:0;
}

这是我们得到的:

小三角输出

为什么以这种形状出现?下图说明了尺寸,请注意,下边框使用 15px,左右使用 10px。

大三角形

也可以通过删除右边框来制作直角三角形。

直角三角形

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

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  margin:20px auto;
}

.triangle-down {
  border-bottom:none;
  border-top: 100px solid red;
}

.triangle-left {
  border-left:none;
  border-right: 100px solid red;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

.triangle-right {
  border-right:none;
  border-left: 100px solid red;
  border-bottom: 50px solid transparent;
  border-top: 50px solid transparent;
}

.triangle-after:after {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid red;
  margin:0 5px;
  content:"";
  display:inline-block;
}

.triangle-after-right:after {
  border-right:none;
  border-left: 5px solid blue;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;

}

.triangle-before:before {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid blue;
  margin:0 5px;
  content:"";
  display:inline-block;
}

.triangle-before-left:before {
  border-left:none;
  border-right: 5px solid blue;
  border-bottom: 5px solid transparent;
  border-top: 5px solid transparent;

}
<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-before-left" href="#">Back</a>
<a class="triangle-after triangle-after-right" href="#">Next</a>

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

.triangle {
    margin: 50px auto;
    width: 100px;
    height: 100px;
/* linear gradient */
    background: -moz-linear-gradient(-45deg,  rgba(255,0,0,0) 0%, rgba(255,0,0,0) 50%, rgba(255,0,0,1) 50%, rgba(255,0,0,1) 100%);
 /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,0)), color-stop(50%,rgba(255,0,0,1)), color-stop(100%,rgba(255,0,0,1)));
 /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* IE10+ */
    background: linear-gradient(135deg,  rgba(255,0,0,0) 0%,rgba(255,0,0,0) 50%,rgba(255,0,0,1) 50%,rgba(255,0,0,1) 100%);
 /* W3C */;
}
<div class="triangle"></div>

这是jsfiddle