CSS 三角形

HTML

您可以使用单个 div 来创建它们。为每个方向的可能性创建类会很好。

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

CSS

这个想法是一个宽度和高度为零的盒子。箭头的实际宽度和高度由边框的宽度决定。例如，在向上箭头中，底部边框为彩色，而左右边框为透明，从而形成三角形。

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid blue; 
}

演示

查看 CodePen 上 Chris Coyier (@chriscoyier) 的笔 解释 CSS 三角形的动画。

示例

Dave Everitt 在文章中写道

对于等边三角形，值得指出的是高度是宽度的 86.6%，因此 (border-left-width + border-right-width) * 0.866% = border-bottom-width