在CSS Tricks - Shapes of 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>它如何以及为什么起作用？
正如亚历克斯所说，等宽的边界以 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;
}<div class="triangle"></div>这给了你这个：
但是不需要顶部边框，因此将其宽度设置为0px. 现在我们的border-bottom of200px将使我们的三角形高200px。
.triangle {
border-color: yellow blue red green;
border-style: solid;
border-width: 0px 200px 200px 200px;
height: 0px;
width: 0px;
}<div class="triangle"></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>最后我们得到了这个：
使用这种技术很容易制作三角形。对于喜欢看动画解释这种技术如何在这里工作的人来说，它是：
否则，这里在 4 幕（这不是悲剧）中详细解释了如何用一个元素制作等腰直角三角形。
<div class="tr"></div>很简单，只要确保width = 1.41 x height. 您可以使用任何技术（参见此处），包括使用百分比和 padding-bottom 来保持纵横比并制作响应式三角形。在下图中，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;
}
首先，最重要的是：定义一个变换原点。默认原点在伪元素的中心，我们需要它在左下角。通过将此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);
}
要隐藏伪元素的不需要的部分（所有溢出 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);
}
如演示中所示，您可以自定义三角形：
skewX()。Here is an animation in JSFiddle I created for demonstration.
Also see snippet below.
This is an Animated GIF made from a Screencast
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;
}
现在我只是将背景颜色更改为白色。图片已附上。
因此我们得到了我们需要的三角形。
考虑下面的三角形
.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
好的，这个三角形将被创建，因为元素的边框在 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>如果您不愿意运行代码片段来查看步骤，我创建了一个图像序列来查看一个图像中的所有步骤：
clip-path这是我觉得这个问题错过了的东西；clip-path
clip-path简而言之具有
clip-path属性的剪裁类似于从一张矩形纸上剪下一个形状（如圆形或五边形）。该属性属于“<a href="https://www.w3.org/TR/css-masking-1/" rel="noreferrer">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并开始创建您自己的。
这是一个老问题，但我认为值得分享如何使用这种三角形技术创建箭头。
让我们创建 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>现在我们只需要将第二个三角形的主要边框颜色设置为与背景相同的颜色：
.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/
如果您想为三角形应用边框，请阅读以下内容：使用 CSS 创建三角形？
几乎所有答案都集中在使用边框构建的三角形上，因此我将详细说明该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) 随机三角形
要获得一个随机三角形，很容易，因为我们只需要删除每个三角形的 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>我写这个是为了让自动生成一个 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);
}
重要提示：
如果三角形在某些浏览器中看起来像素化，请尝试此处描述的方法之一。
如果你想玩弄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>这是另一个小提琴：
.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;
}
其他人已经很好地解释了这一点。让我给你一个动画，它会快速解释这一点：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;
}
我知道这是一个旧的，但我想在这个讨论中补充一点，至少有 5 种不同的方法可以单独使用 HTML 和 CSS创建三角形。
borders linear-gradient conic-gradient transform和overflow 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>
用于clip-path: polygon(50% 0%, 100% 100%, 0% 100%);创建易于三角形
<div class="triangle"></div>
.triangle{width:200px; height:200px;background:#000;clip-path: polygon(50% 0%, 100% 100%, 0% 100%);}
尝试这个：-
.triangle {
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 0px 200px 200px 200px;
height: 0px;
width: 0px;
}<div class="triangle"></div>clip-path 对我来说效果最好 - 适用于具有和不具有固定尺寸的 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%);
}