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

游乐场页面

重要提示：如果三角形在某些浏览器中显示为像素化，请尝试此处描述的方法之一。

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

.三角形{边框颜色：黄-蓝-红-绿；边框样式：实心；边框宽度：200px 200px 200px 200px；高度：0px；宽度：0px；}<div class=“triangle”></div>

这为您提供了：

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

.三角形{边框颜色：黄-蓝-红-绿；边框样式：实心；边框宽度：0px 200px 200px；高度：0px；宽度：0px；}<div class=“triangle”></div>

我们将得到：

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

.三角形{边框颜色：透明透明红色透明；边框样式：实心；边框宽度：0px 200px 200px；高度：0px；宽度：0px；}<div class=“triangle”></div>

最后我们得到了：

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

不同的方法。具有线性梯度（对于IE，仅IE 10+）。您可以使用任何角度：

.三角形{边距：50px自动；宽度：100px；高度：100px；/*线性梯度*/背景：-moz线性梯度（-45deg，rgba（255,0,0,0）0%，rgba，255,0,0，50%，rgba）255,0,0,1，50%；/*FF3.6以上*/背景：-webkit渐变（线性、左上、右下、颜色停止（0%，rgba（255,0,0,0））、颜色停止器（50%，rgba）255,0,0，0））、色彩停止器（50%，rgba；/*铬，Safari4+*/背景：-webkit线性梯度（-45deg，rgba（255,0,0）0%，rgba，255,0,0,0，50%，rgba）255,0,0,1，50%；/*Chrome10+、Safari5.1+*/背景：o-linear-gradient（-45度，rgba（255,0,0）0%，rgba（2550,0,0）50%，rgba（255,00,1）50%；/*歌剧11.10+*/背景：-ms线性梯度（-45度，rgba（255,0,0）0%，rgba，255,0,0,0，50%，rgba）255,0,0,1，50%；/*即10+*/背景：线性梯度（135度，rgba（255,0,0）0%，rgba，255,0,0,0，50%，rgba）255,0,0,1，50%；/*W3C*/；}<div class=“triangle”></div>

这是jsfiddle

我知道这是一个旧的方法，但我想在讨论中补充一点，单独使用HTML和CSS创建三角形至少有5种不同的方法。

使用边框使用线性梯度使用圆锥梯度使用转换和溢出使用剪辑路径

我认为，除了方法3（使用圆锥曲线梯度）之外，这里已经介绍了所有内容，所以我将在这里分享：

.三角形{宽度：40px；高度：40px；背景：圆锥形梯度（50%50%，透明135度，绿色0，绿色225度，透明0）；}<div class=“triangle”></div>

CSS剪辑路径

这是我觉得这个问题错过了的；剪辑路径

简单地剪辑路径具有剪切路径属性的剪切类似于从矩形纸张上剪切形状（如圆形或五边形）。该属性属于“CSS屏蔽模块级别1”规范。规范指出，“CSS屏蔽提供了两种方法来部分或完全隐藏视觉元素的部分：屏蔽和剪切”。粉碎杂志摘录

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

三角形形状示例

第二部分{-webkit剪辑路径：多边形（50%0%，0%100%，100%100%）；剪辑路径：多边形（50%0%、0%100%、100%100%）；背景：红色；宽度：100px；高度：100px；}<div></div>

缺点

目前它确实有一个主要的缺点，一个是它主要缺乏支持，只在-webkit浏览器中得到了真正的覆盖，在IE上没有支持，在FireFox中只有很部分。

资源

这里有一些有用的资源和材料，可以帮助您更好地了解剪辑路径，并开始创建自己的剪辑路径。

Clippy-剪辑路径生成器W3C候选推荐文件MDN剪辑路径文档剪辑路径浏览器支持