CSS 三角形：五幕中的悲剧

作为alex said，相等宽度的边界以 45 度角相互对接：

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

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

...和 0 的高度...

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

这导致了一个三角形。

边框在它们相交的位置使用成角度的边（与宽度相等的边框成 45 ° 角，但更改边框宽度会使角度倾斜）。

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

<div></div>

查看jsFiddle。

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

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

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

<div class=""></div>

它给你this：

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

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

<div class=""></div>

我们将得到this：

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

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

<div class=""></div>

最后我们得到this：

不同的方法：CSS3 三角形与变换旋转

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

链接到动画：How to make a CSS3 。

和演示：CSS3 s用变换旋转。

否则，这里是 4 行为的详细解释（这不是悲剧）如何使一个元素的等腰直角三角形。

注 1：对于非等腰三角形和花哨的东西，您可以看到步骤 4。

注 2：在以下代码片段中，不包含供应商前缀，它们包含在codepen demos中。

注 3：以下解释的 HTML 始终为：<div class="tr"></div>

步骤 1：创建一个 div

简单，只需确保width = 1.41 x height。您可以使用任何 techinque (see here)，包括使用百分比和 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;
}

步骤 2：让我们旋转

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

现在我们可以将伪元素顺时针旋转 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;。删除边框后，您将获得...aTRIANGLE！：

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

第四步：更进一步……

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

通过使用skewX()使它们更薄或更平坦。

通过播放变换 orign 和旋转方向，使它们指向左，右或任何其他方向。

使some reflexion具有 3D 变换属性。

将图像inside the

更多...释放CSS3的力量！

为什么使用这种技术？

三角形可以很容易地响应。

您可以使 with border。

您可以保持三角形的边界。这意味着只有当光标为inside the 时，您才能触发悬停状态或单击事件。在this one等情况下，这可能会非常方便，因为每个三角形都无法覆盖其邻居，因此每个三角形都有自己的悬停状态。

你可以做一些fancy effects like reflections。

它将帮助您了解 2d 和 变换属性。

为什么不使用这种技术？

主要缺点是浏览器兼容性，IE9 + 支持 2d 转换属性，因此如果您计划支持 IE8，则不能使用此技术。有关更多信息，请参阅CanIuse。对于使用 变换的一些花哨效果，如the reflection浏览器支持 IE10 +（有关更多信息，请参阅canIuse）。

你不需要任何响应，一个普通的三角形对你来说很好，那么你应该去这里解释的边框技术：更好的浏览器兼容性和更容易理解，这要归功于这里的惊人帖子。