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度角相互对接：

如果没有顶部边框，则如下所示：

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

...高度为0 ...

...最后，使两个侧面边框透明：

产生一个三角形。

边界在其相交处使用倾斜的边缘（边界相等的45°角，但是更改边界宽度会倾斜角度）。

div {
  width: 60px;
  border-width: 30px;
  border-color: red blue green yellow;
  border-style: solid;
}

<div></div>

看看jsFiddle。

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

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

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

这给你这个：

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

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

我们会得到这个：

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

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

最终我们得到这个：

不同的方法：

具有转换功能的CSS3三角形

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

• 链接到动画：如何制作CSS3三角形。
• 以及DEMO：用变换制作的CSS3三角形旋转。

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

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

步骤1：进行div

容易，只需确保即可width = 1.41 x height。您可以使用任何技巧（请参见此处），包括使用百分比和底部填充来保持长宽比并创建一个自适应三角形。在下图中，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添加到伪元素中：

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

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

至此，我们有了这个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：

.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动画

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实体这样简单的解决方案：

▲

结果：

▲

请参阅：上下三角形的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>

好的，由于元素的边框在HTML和CSS中协同工作的方式而创建了这个三角形...

由于我们通常使用1或2px边框，因此我们永远不会注意到边框以相同的宽度彼此成45°角，如果宽度发生变化，角度度也会发生变化，请运行下面创建的CSS代码：

.triangle {
  width: 100px;
  height: 100px;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}

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

然后，在下一步中，我们没有任何宽度或高度，例如：

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid black;
  border-right: 50px solid black;
  border-bottom: 100px solid red;
}

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

现在我们使左右边界不可见，以使我们想要的三角形如下所示：

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

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

如果您不希望运行该片段以查看步骤，那么我创建了一个图像序列来查看一个图像中的所有步骤：

不同的方法。使用线性渐变（对于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

的CSS clip-path

我觉得这个问题已经错过了。 clip-path

clip-path 简而言之

具有clip-path属性的剪切类似于从矩形纸上切出形状（如圆形或五边形）。该属性属于“ CSS Masking Module Level 1 ”规范。规范指出：“ CSS遮罩为部分或全部隐藏视觉元素提供了两种方法：遮罩和剪裁”。

• 粉碎杂志摘录

clip-path将使用元素本身而不是其边界来剪切您在其参数中指定的形状。它使用了一个非常简单的基于百分比的坐标系，这使编辑变得非常容易，意味着您可以在几分钟内将其拾取并创建怪异而奇妙的形状。

三角形形状示例

div {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: red;
  width: 100px;
  height: 100px;
}

<div></div>

缺点

目前，它确实有一个主要缺点，其中一个是它主要缺乏支持，仅在-webkit-浏览器中真正涵盖，并且对IE不提供支持，而在FireFox中却只有一部分。

资源资源

这里有一些有用的资源和材料，可以帮助您更好地理解clip-path并开始创建自己的资源。

• Clippy- clip-path发电机
• W3C候选人推荐文件
• MDN clip-path文档
• clip-path 浏览器支持

这是一个古老的问题，但我认为值得分享如何使用此三角技术创建箭头。

步骤1：

让我们创建2个三角形，对于第二个三角形，我们将使用:after伪类并将其放置在另一个类的下面：

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-up:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #ccc;
         right: -50px;
    }

<div class="arrow arrow-up"> </div>

第2步

现在我们只需要将第二个三角形的主要边框颜色设置为背景的相同颜色即可：

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: relative;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-up:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #fff;
         right: -50px;
    }

<div class="arrow arrow-up"> </div>

摆弄所有箭头：http :
//jsfiddle.net/tomsarduy/r0zksgeu/

SASS（SCSS）三角形混合

我编写此代码是为了使其更容易（和干燥）来自动生成CSS三角形：

// Triangle helper mixin (by Yair Even-Or)
// @param {Direction} $direction - either `top`, `right`, `bottom` or `left`
// @param {Color} $color [currentcolor] - Triangle color
// @param {Length} $size [1em] - Triangle size
@mixin triangle($direction, $color: currentcolor, $size: 1em) {
  $size: $size/2;
  $transparent: rgba($color, 0);
  $opposite: (top:bottom, right:left, left:right, bottom:top);

  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border: $size solid $transparent;
  border-#{map-get($opposite, $direction)}-color: $color;
  margin-#{$direction}: -$size;
}

用例示例：

span {
  @include triangle(bottom, red, 10px);
}

游乐场页面

重要说明：
如果三角形在某些浏览器中看起来像是像素化的，请尝试使用此处描述的方法之一。

^{如果要对三角形应用边框，请阅读以下内容：使用CSS创建三角形？}

几乎所有答案都集中在使用border构建的三角形上，因此我将详细说明该linear-gradient方法（从@lima_fil的答案开始）。

使用类似度数的值45°将迫使我们遵循特定的比率，height/width以获得所需的三角形，而这将不会做出响应：

.tri {
  width:100px;
  height:100px;
  background:linear-gradient(45deg, transparent 49.5%,red 50%);
  
  /*To illustrate*/
  border:1px solid;
}

Good one
<div class="tri"></div>
bad one
<div class="tri" style="width:150px"></div>
bad one
<div class="tri" style="height:30px"></div>

而不是这样做，我们应该考虑方向的预定义值，例如to bottom，to top等。在这种情况下，我们可以获取任何类型的三角形，同时保持其响应性。

1）矩形三角形

为了获得这种三角形，我们需要一个线性梯度以及类似的对角方向上to bottom right，to top left，to bottom left等

.tri-1,.tri-2 {
  display:inline-block;
  width:100px;
  height:100px;
  background:linear-gradient(to bottom left, transparent 49.5%,red 50%);
  border:1px solid;
  animation:change 2s linear infinite alternate;
}
.tri-2 {
  background:linear-gradient(to top right, transparent 49.5%,red 50%);
  border:none;
}

@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}

<div class="tri-1"></div>
<div class="tri-2"></div>

2）等腰三角形

为此，我们将需要2个如上所述的线性渐变，并且每个线性渐变将占用一半的宽度（或高度）。就像我们创建第一个三角形的镜像一样。

.tri {
  display:inline-block;
  width:100px;
  height:100px;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);
  background-size:50.3% 100%; /* I use a value slightly bigger than 50% to avoid having a small gap between both gradient*/
  background-position:left,right;
  background-repeat:no-repeat;
  
  animation:change 2s linear infinite alternate;
}


@keyframes change {
  from {
    width:100px;
    height:100px;
  }
  to {
    height:50px;
    width:180px;
  }
}

<div class="tri"></div>

3）等边三角形

由于我们需要保持渐变的高度和宽度之间的关系，因此处理起来有些棘手。我们将拥有与上述相同的三角形，但是为了将等腰三角形转换为等边三角形，我们将使计算更加复杂。

为简单起见，我们将考虑div的宽度是已知的，并且高度足够大，可以在（height >= width）中绘制三角形。

我们有两个渐变，g1并且g2，蓝线是的宽度，div w每个渐变将具有它的50％（w/2），并且三角形的每一边都等于w。绿线是两个渐变的高度hg我们可以轻松获得以下公式：

(w/2)² + hg² = w²---> hg = (sqrt(3)/2) * w--->hg = 0.866 * w

我们可以依靠它calc()来进行计算并获得所需的结果：

.tri {
  --w:100px;
  width:var(--w);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);
  background-size:calc(var(--w)/2 + 0.5px)  calc(0.866 * var(--w));
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

另一种方法是控制div的高度，并使渐变的语法保持简单：

.tri {
  --w:100px;
  width:var(--w);
  height:calc(0.866 * var(--w));
  display:inline-block;
  background:
   linear-gradient(to bottom right, transparent 49.8%,red 50%) left,
   linear-gradient(to bottom left,  transparent 49.8%,red 50%) right;
  background-size:50.2% 100%;
  background-repeat:no-repeat;
  
}

<div class="tri"></div>
<div class="tri" style="--w:80px"></div>
<div class="tri" style="--w:50px"></div>

4）随机三角形

要获得随机三角形，这很容易，因为我们只需要删除每个BUT的50％的条件，就应保持两个条件（两个都应具有相同的高度，并且两个宽度的总和应为100％）。

.tri-1 {
  width:100px;
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 50%,red 0),
  linear-gradient(to bottom left, transparent 50%,red 0);
  background-size:20% 60%,80% 60%;
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
 
}

<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;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2));
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49.5%,red 50%),
  linear-gradient(to bottom left,  transparent 49.5%,red 50%);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri" ></div>

<div class="tri" style="--wg1:80px;--wg2:60px;--hg:100px;" ></div>

奖金

我们不要忘记，我们也可以应用旋转和/或倾斜，并且我们还有更多选择以获得更多三角形：

.tri {
  --wg1: 20px; 
  --wg2: 60px;
  --hg:30px; 
  width:calc(var(--wg1) + var(--wg2) - 0.5px);
  height:100px;
  display:inline-block;
  background-image:
  linear-gradient(to bottom right, transparent 49%,red 50%),
  linear-gradient(to bottom left,  transparent 49%,red 50%);

  background-size:var(--wg1) var(--hg),var(--wg2) var(--hg);
  background-position:
    left bottom,right bottom;
  background-repeat:no-repeat;
  
}

<div class="tri" ></div>

<div class="tri" style="transform:skewY(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 {
 width:100px;
 height:100px;
}

polygon {
  fill:red;
}

<svg viewBox="0 0 100 100"><polygon points="0,100 0,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,0 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="0,100 50,23 100,100" /></svg>
<svg viewBox="0 0 100 100"><polygon points="20,60 50,43 80,100" /></svg>

这是另一个小提琴：

.container:after {
    position: absolute;
    right: 0;
    content: "";
    margin-right:-50px;
    margin-bottom: -8px;
    border-width: 25px;
    border-style: solid;
    border-color: transparent transparent transparent #000;
    width: 0;
    height: 0;
    z-index: 10;
    -webkit-transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
    transition: visibility 50ms ease-in-out,opacity 50ms ease-in-out;
    bottom: 21px;
}
.container {
    float: left;
    margin-top: 100px;
    position: relative;
    width: 150px;
    height: 80px;
    background-color: #000;
}

.containerRed {
    float: left;
    margin-top: 100px;
    position: relative;
    width: 100px;
    height: 80px;
    background-color: red;
}

https://jsfiddle.net/qdhvdb17/

其他人已经很好地解释了这一点。让我给您一个动画，它将对此进行快速解释：http : //codepen.io/chriscoyier/pen/lotjh

这里有一些代码供您使用和学习这些概念。

HTML：

<html>
  <body>
    <div id="border-demo">
    </div>
  </body>
</html>

CSS：

/*border-width is border thickness*/
#border-demo {
    background: gray;
    border-color: yellow blue red green;/*top right bottom left*/
    border-style: solid;
    border-width: 25px 25px 25px 25px;/*top right bottom left*/
    height: 50px;
    width: 50px;
}

玩这个，看看会发生什么。将高度和宽度设置为零。然后删除顶部边框并使左右透明，或者只是看下面的代码来制作一个css三角形：

#border-demo {
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid blue;
}

如果您想使用border-size，width并height查看它们如何创建不同的形状，请尝试以下操作：

const sizes = [32, 32, 32, 32];
const triangle = document.getElementById('triangle');

function update({ target }) {
  let index = null;
  
  if (target) {
    index = parseInt(target.id);

    if (!isNaN(index)) {
      sizes[index] = target.value;
    }
  }
  
  window.requestAnimationFrame(() => {
    triangle.style.borderWidth = sizes.map(size => `${ size }px`).join(' ');
    
    if (isNaN(index)) {
      triangle.style[target.id] = `${ target.value }px`;
    }
  });
}

document.querySelectorAll('input').forEach(input => {
  input.oninput = update;
});

update({});

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#triangle {
    border-style: solid;
    border-color: yellow magenta blue black;
    background: cyan;
    height: 0px;
    width: 0px;
}

#controls {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  display: flex;
  box-shadow: 0 0 32px rgba(0, 0, 0, .125);
}

#controls > div {
  position: relative;
  width: 25%;
  padding: 8px;
  box-sizing: border-box;
  display: flex;
}

input {
  margin: 0;
  width: 100%;
  position: relative;
}

<div id="triangle" style="border-width: 32px 32px 32px 32px;"></div>

<div id="controls">
  <div><input type="range" min="0" max="128" value="32" id="0" /></div>
  <div><input type="range" min="0" max="128" value="32" id="1" /></div>
  <div><input type="range" min="0" max="128" value="32" id="2" /></div>
  <div><input type="range" min="0" max="128" value="32" id="3" /></div>
  <div><input type="range" min="0" max="128" value="0" id="width" /></div>
  <div><input type="range" min="0" max="128" value="0" id="height" /></div>
</div>

尝试这个：-

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

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

我知道这是一个古老的方法，但是我想补充一下这一讨论，即至少有5种单独使用HTML和CSS 创建三角形的方法。

1. 使用 borders
2. 使用 linear-gradient
3. 使用 conic-gradient
4. 使用 transform和overflow
5. 使用 clip-path

我认为除方法3以外，所有其他内容都已在此处介绍，使用conic-gradient，因此我将在这里分享：

.triangle{
        width: 40px;
        height: 40px;
        background: conic-gradient(at 50% 50%,transparent 135deg,green 0,green 225deg, transparent 0);
    }

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