CSS 三角形是如何工作的？

How do CSS triangles work?

提问by Stanislav Shabalin

There're plenty of different CSS shapes over at CSS Tricks - Shapes of CSSand I'm particularly puzzled with a triangle:

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>

How and why does it work?

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

回答by sdleihssirhc

CSS Triangles: A Tragedy in Five Acts

CSS 三角形：五幕悲剧

As alex said, borders of equal width butt up against each other at 45 degree angles:

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

When you have no top border, it looks like this:

当您没有顶部边框时，它看起来像这样：

Then you give it a width of 0...

然后你给它一个宽度为 0...

...and a height of 0...

...和0的高度...

...and finally, you make the two side borders transparent:

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

That results in a triangle.

结果是一个三角形。

回答by alex

The borders use an angled edge where they intersect (45° angle with equal width borders, but changing the border widths can skew the angle).

边框在它们相交的地方使用有角度的边缘（45° 角，边框宽度相等，但更改边框宽度会使角度倾斜）。

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

<div></div>

Have a look to the jsFiddle.

看看jsFiddle。

By hiding certain borders, you can get the triangle effect (as you can see above by making the different portions different colours). transparentis often used as an edge colour to achieve the triangle shape.

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

回答by Mouna Cheikhna

Start with a basic square and borders. Each border will be given a different color so we can tell them apart:

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

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

which gives you this:

这给了你这个：

But there's no need for the top border, so set its width to 0px. Now our border-bottom of 200pxwill make our triangle 200px tall.

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

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

and we will get this:

我们会得到这个：

Then to hide the two side triangles, set the border-color to transparent. Since the top-border has been effectively deleted, we can set the border-top-color to transparent as well.

然后隐藏两个边三角形，将边框颜色设置为透明。由于 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;
}

finally we get this:

最后我们得到了这个：

回答by web-tiki

Different approach:

不同的做法：

CSS3 triangleswith transform rotate

带变换旋转的CSS3 三角形

Triangular shape is pretty easy to make using this technique. For people who prefer to see an animation explaining how this technique works here it is :

使用这种技术很容易制作三角形。对于喜欢看动画解释此技术如何工作的人来说，它是：

• Link to the ANIMATION : How to make a CSS3triangle.
• And DEMO : CSS3trianglesmade with transform rotate.

• 动画链接：如何制作CSS3三角形。
• 和演示：用变换旋转制作的CSS3三角形。

Otherwise, here is detailed explanation in 4 acts (this is not a tragedy) of how to make an isosceles right-angled triangle with one element.

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

• Note 1 : for non isosceles triangles and fancy stuff, you can see step 4.
• Note 2 : in the following snippets, the vendor prefixes aren't included. they are included in the codepen demos.
• Note 3 : the HTML for the following explanation is always :<div class="tr"></div>

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

---

---

STEP 1 :Make a div

第 1步：制作一个 div

Easy, just make sure that width = 1.41 x height. You may use any techinque (see here) including the use of percentages and padding-bottom to maintain the aspect ratio and make a responsive triangle. In the following image, the div has a golden yellow border.

很简单，只要确保width = 1.41 x height. 您可以使用任何技术（请参阅此处），包括使用百分比和底部填充来保持纵横比并制作响应式三角形。在下图中，div 具有金黄色边框。

In that div, insert a pseudo elementand give it 100% width and height of parent. The pseudo element has a blue background in the following image.

在那个 div 中，插入一个伪元素并赋予它父元素的100% 宽度和高度。伪元素在下图中具有蓝色背景。

At this point, we have this CSS:

在这一点上，我们有这个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;
}

STEP 2 :Let's rotate

第 2 步：让我们旋转

First, most important : define a transform origin. The default originis in the center of the pseudo element and we need it at the bottom left. By adding this CSSto the pseudo element :

首先，最重要的是：定义一个变换原点。该默认原点是在伪元素的中心，我们需要它的左下角。通过将此CSS添加到伪元素：

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

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

Now we can rotate the pseudo element 45 degrees clockwise with transform : rotate(45deg);

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

At this point, we have this CSS:

在这一点上，我们有这个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);
}

STEP 3 : hide it

第 3 步：隐藏它

To hide the unwanted parts of the pseudo element (everything that overflows the div with the yellow border) you just need to set overflow:hidden;on the container. after removing the yellow border, you get... a TRIANGLE! :

要隐藏伪元素的不需要的部分（所有用黄色边框溢出 div 的部分），您只需要overflow:hidden;在容器上进行设置。去除黄色边框后，你会得到......一个三角形！：

DEMO

演示

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);
}

STEP 4 : go further...

第 4 步：走得更远……

As shown in the demo, you can customize the triangles :

如演示中所示，您可以自定义三角形：

1. Make them thinner or flatter by playing with skewX().
2. Make them point left, right or any other direction by playing with the transform orign and rotation direction.
3. Make some reflexionwith 3D transform property.
4. Give the triangle borders
5. Put an image inside the triangle
6. Much more... Unleash the powers of CSS3!

1. 使用 使它们更薄或更平skewX()。
2. 通过变换原点和旋转方向使它们指向左、右或任何其他方向。
3. 做一些反思与3D转换属性。
4. 给三角形边框
5. 将图像放入三角形内
6. 更多... 释放CSS3的力量！

---

---

Why use this technique?

为什么要使用这种技术？

1. Triangle can easily be responsive.
2. You can make a triangle with border.
3. You can maintain the boundaries of the triangle. This means that you can trigger the hover state or click event only when the cursor is inside the triangle. This can become very handy in some situations like this onewhere each triangle can't overlay it's neighbours so each triangle has it's own hover state.
4. You can make some fancy effects like reflections.
5. It will help you understand 2d and 3d transform properties.

1. Triangle 可以轻松响应。
2. 您可以制作一个带边框的三角形。
3. 您可以保持三角形的边界。这意味着只有当光标在三角形内时才能触发悬停状态或单击事件。这可以成为像某些情况下非常方便的这一个地方使每个三角形都有它自己的悬停状态的每个三角形不能覆盖它的邻国。
4. 您可以制作一些奇特的效果，例如反射。
5. 它将帮助您了解 2d 和 3d 变换属性。

Why not use this technique?

为什么不使用这种技术？

1. The main drawback is the browser compatibility, the 2d transform properties are supported by IE9+ and therefore you can't use this technique if you plan on supporting IE8. See CanIusefor more info. For some fancy effects using 3d transforms like the reflectionbrowser support is IE10+ (see canIusefor more info).
2. You don't need anything responsive and a plain triangle is fine for you then you should go for the border technique explained here : better browser compatibility and easier to understand thanks to the amaizing posts here.

1. 主要缺点是浏览器兼容性，IE9+ 支持 2d 转换属性，因此如果您计划支持 IE8，则不能使用此技术。有关更多信息，请参阅CanIuse。对于一些使用 3d 变换的奇特效果，如反射浏览器支持是 IE10+（有关更多信息，请参阅canIuse）。
2. 你不需要任何响应，一个简单的三角形对你来说很好，那么你应该使用这里解释的边框技术：由于这里的惊人帖子，更好的浏览器兼容性和更容易理解。

回答by yunzen

Here is an animation in JSFiddleI created for demonstration.

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

Also see snippet below.

另请参阅下面的片段。

This is an Animated GIF made from a Screencast

这是由截屏视频制作的动画 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>

---

---

Random version

随机版本

/**
 * 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>

---

---

All at once version

一次性版本

$('#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>

回答by Rai Ammad Khan

Lets say we have the following div:

假设我们有以下 div：

<div id="triangle" />

Now Edit the CSS step-by-step, so you will get clear idea what is happening around

现在一步一步地编辑 CSS，这样你就会清楚地知道周围发生了什么

STEP 1:JSfiddle Link:

第 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;
    }

This is a simple div. With a very simple CSS. So a layman can understand. Div has dimensions 150 x 150 pixels with the border 50 pixels. The image is attached:

这是一个简单的div。用一个非常简单的 CSS。所以外行人都能看懂。Div 的尺寸为 150 x 150 像素，边框为 50 像素。附上图片：

STEP 2:JSfiddle Link:

第 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;
}

Now I just changed the border-color of all 4 sides. The image is attached.

现在我只是改变了所有 4 边的边框颜色。附上图片。

STEP:3JSfiddle Link:

步骤：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;
}

Now I just changed the height & width of div from 150 pixels to zero. The image is attached

现在我只是将 div 的高度和宽度从 150 像素更改为 0。附上图片

STEP 4:JSfiddle:

第 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;
}

Now I have made all the borders transparent apart from the bottom border. The image is attached below.

现在我已经使除底部边框之外的所有边框都透明。图片附在下面。

STEP 5:JSfiddle Link:

第 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;
}

Now I just changed the background color to white. The image is attached.

现在我只是将背景颜色更改为白色。附上图片。

Hence we got the triangle we needed.

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

回答by Rai Ammad Khan

And now something completely different...

现在完全不同的东西......

Instead of using css tricks don't forget about solutions as simple as html entities:

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

▲

Result:

结果：

▲

▲

See: What are the HTML entities for up and down triangles?

请参阅：上下三角形的 HTML 实体是什么？

回答by Daniel Imms

Consider the below triangle

考虑下面的三角形

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

This is what we are given:

这是我们得到的：

Why it came out in this shape? The below diagram explains the dimensions, note that 15px was used for the bottom border and 10px was used for left and right.

为什么会以这种形式出现？下图解释了尺寸，注意 15px 用于底部边框，10px 用于左侧和右侧。

It's pretty easy to make a right-angle triangle also by removing the right border.

通过移除右边框也可以很容易地制作直角三角形。

回答by PseudoNinja

Taking it one step further, using css based on this I added arrows to my back and next buttons (yes I know its not 100% cross-browser, but slick none the less).

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

回答by Alireza

OK,this triangle will get created because of the way that borders of the elements work together in HTML and CSS...

好的，这个三角形的创建是因为元素的边框在 HTML 和 CSS 中协同工作的方式......

As we usually use 1 or 2px borders, we never notice that borders make a 45° anglesto each others with the same width and if the width changes, the angle degree get changed as well, run the CSS code I created below:

由于我们通常使用 1 像素或 2 像素的边框，我们从未注意到边框以相同的宽度与彼此成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>

Then in the next step, we don't have any width or height, something like this:

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

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

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

And now we make the left and right borders invisible to make our desirable triangle as below:

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

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

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

If you not willing to run the snippet to see the steps, I've created an image sequence to have a look at all steps in one image:

如果您不愿意运行代码段来查看步骤，我已经创建了一个图像序列来查看一个图像中的所有步骤：