时间戳

首页 > 解决方案 > 是否可以创建具有奇数边长的 CSS 边框三角形？

html - 是否可以创建具有奇数边长的 CSS 边框三角形？

问题描述

我可以使用带边框的 CSS 技巧创建一个 tirangle，例如：

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

  border-top: 20px solid #f00;
}
<div class="arrow-down"></div>

（来自https://css-tricks.com/snippets/css/css-triangle/）

但是，如您所见，它的边长总是均匀的。发生这种情况是因为它由两个边界边组成 - 左侧和右侧。如果我让一侧比另一侧短 - 它不能解决问题，我只会得到一个等边三角形。如果我在设计图中有一个奇边三角形，我可以使用这种方法。

我认为，转换可能会有所帮助，但我不确定，这是一种足够好的和严格的方法。

还有其他解决方案吗？

标签： htmlcss

解决方案

我会transform通过增加Y-scale来拉伸三角形

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

  border-top: 20px solid #f00;
  transform: scaleY(1.66);
}
<div class="arrow-down"></div>

推荐阅读