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

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

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

否则，这里将在4幕（这不是悲剧）中详细解释如何用一个元素制作等腰直角三角形。

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

---

步骤1：制作一个div

简单，只需确保宽度=1.41 x高度。您可以使用任何技术（参见此处），包括使用百分比和填充底部来保持纵横比并形成响应三角形。在下图中，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添加到伪元素：

变换原点：0 100%；或变换原点：左下；

现在我们可以通过变换将伪元素顺时针旋转45度：旋转（45度）；

此时，我们有了这个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；在容器上。去掉黄色边框后，你会。。。三角形！：

DEMO

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步：更进一步。。。

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

通过玩sketchX（）使它们变薄或变平。通过播放变换原点和旋转方向，使它们指向左、右或任何其他方向。使用3D变换属性进行一些反射。给出三角形边框在三角形内放置图像更多。。。释放CSS3的力量！

---

为什么要使用这种技术？

三角形很容易做出反应。你可以做一个带边框的三角形。可以保持三角形的边界。这意味着您只能在光标位于三角形内时触发悬停状态或单击事件。这在某些情况下会变得非常方便，比如每个三角形不能覆盖其邻居，因此每个三角形都有自己的悬停状态。你可以做出一些奇特的效果，比如反射。它将帮助您了解二维和三维变换财产。

为什么不使用此技术？

主要缺点是浏览器兼容性，IE9+支持2d转换财产，因此如果您计划支持IE8，则无法使用此技术。有关更多信息，请参阅CanIuse。对于一些使用3d变换的奇特效果，如反射浏览器支持IE10+（更多信息请参见canIuse）。你不需要任何响应性的东西，一个简单的三角形对你来说很好，那么你应该使用这里解释的边界技术：更好的浏览器兼容性和更容易理解，这要感谢这里的精彩文章。

更进一步，使用基于此的css，我在上一个按钮和下一个按钮上添加了箭头（是的，我知道它不是100%跨浏览器，但仍然很流畅）。

.三角形{宽度：0；高度：0；左边框：50px实心透明；右边框：50px实心透明；边框底部：100px纯红色；边距：20px自动；}.向下三角形{边框底部：无；边框顶部：100px纯红色；}.左三角形{左侧边框：无；右边框：100px纯红色；边框底部：50px实心透明；边框顶部：50px实心透明；}.直角三角形{边界权：无；左边框：100px纯红色；边框底部：50px实心透明；边框顶部：50px实心透明；}.三角形后：后{宽度：0；高度：0；左侧边框：5px实心透明；右边框：5px实心透明；边框底部：5px纯红色；边距：0 5px；内容：“”；显示：内联块；}.右后三角：后{边界权：无；左侧边框：5px纯蓝色；边框底部：5px实心透明；边框顶部：5px实心透明；}前三角形：前{宽度：0；高度：0；左侧边框：5px实心透明；右边框：5px实心透明；边框底部：5px纯蓝色；边距：0 5px；内容：“”；显示：内联块；}.左前三角：前{左侧边框：无；右边框：5px纯蓝色；边框底部：5px实心透明；边框顶部：5px实心透明；}<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 after left”href=“#”>返回</a><a class=“triangle after triangle”href=“#”>下一步</a>

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三角形的工作方式有很多很好的解释。我认为这是一种技巧，而不是一种可以通用的技巧。

为了便于阅读和维护，我建议您在SVG中定义几何图形。

然后，可以通过添加data:image/SVG+xml，前缀，使用data-uri转换SVG。作为一个数据uri，它现在可以用作CSS中的背景图像。因为SVG是纯文本的，所以您可以很容易地对几何图形、笔划和填充颜色进行更新。

第三节{宽度：100px；高度：100px；显示：内联块；背景图像：url（'data:image/svg+xml，<svg xmlns=“http://www.w3.org/2000/svg“viewBox=”0 0 32 32“><path fill=”red“d=”M31.345 29H1.655L16.5 1.96z“/></svg>'）；}＜div＞<div class=“tri”></div><div class=“tri”></div><div class=“tri”></div></div>

其他人已经很好地解释了这一点。让我给你一个动画，它将快速解释这一点：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;
}

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

另请参见下面的代码段。

这是一个由Screencast制作的动画GIF

变换=[｛'border-left-width'：'30'，'margin-left'：'70'｝，{'婴儿-婴儿宽度'：'80'}，｛'右-右宽度‘：‘30’｝，｛“订单到页面宽度”：“0”，“页边空白”：“70”｝，｛'宽度'：“0”｝，｛“高度”：“0”，“页边空白”：“120”｝，｛'orderLeftColor'：'transparent'｝，｛'OrderRightColor'：'透明'｝];$（'#a'）.click（function（）｛$（'.border'）.ctrigger（“click”）；｝）；（函数（$）{var持续时间=1000$（'.border'）.click（function）{对于（var i=0；i<transforms.length；i++）{$（这个）.animate（变换[i]，持续时间）}}).end（）}（jQuery））.边框{边距：20px 50px；宽度：50px；高度：50px；边框宽度：50px；边框样式：实心；边框顶部颜色：绿色；边框右侧颜色：黄色；边框底部颜色：红色；边框左侧颜色：蓝色；光标：指针}<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>单击它<br><div class=“border”></div>

---

随机版本

/***将数组元素顺序随机化。*使用Durstenfeld洗牌算法。*/函数shuffleArray（数组）{对于（var i=array.length-1；i>0；i-）{var j=数学地板（数学随机（）*（i+1））；var temp=数组[i]；array[i]=array[j]；array[j]=温度；}返回数组；}变换=[｛'border-left-width'：'30'，'margin-left'：'70'｝，{'婴儿-婴儿宽度'：'80'}，｛'右-右宽度‘：‘30’｝，｛“订单到页面宽度”：“0”，“页边空白”：“70”｝，｛'宽度'：“0”｝，｛“高度”：“0”｝，｛'orderLeftColor'：'transparent'｝，｛'OrderRightColor'：'透明'｝];transforms=shuffleArray（变换）$（'#a'）.click（function（）｛$（'.border'）.ctrigger（“click”）；｝）；（函数（$）{var持续时间=1000$（'.border'）.click（function）{对于（var i=0；i<transforms.length；i++）{$（这个）.animate（变换[i]，持续时间）}}).end（）}（jQuery））.边框{边距：50px；宽度：50px；高度：50px；边框宽度：50px；边框样式：实心；边框顶部颜色：绿色；边框右侧颜色：黄色；边框底部颜色：红色；边框左侧颜色：蓝色；光标：指针}<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>单击它<br><div class=“border”></div>

---

一次性版本

$（'#a'）.click（function（）｛$（'.border'）.ctrigger（“click”）；｝）；（函数（$）{var持续时间=1000$（'.border'）.click（function）{$（这个）.animate（｛'顺序到宽度'：0，'边框左宽度'：30，'右边框宽度'：30，'边框底部宽度'：80，'width'：0，“高度”：0，'左边距'：100，'页边空白'：150，'borderTopColor'：'透明'，'borderRightColor'：'透明'，“borderLeftColor”：“transparent”｝，持续时间）}).end（）}（jQuery））.边框{边距：50px；宽度：50px；高度：50px；边框宽度：50px；边框样式：实心；边框顶部颜色：绿色；边框右侧颜色：黄色；边框底部颜色：红色；边框左侧颜色：蓝色；光标：指针}<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>单击它<br><div class=“border”></div>