如何在HTML中制作一个三角形？

Question

我想使用基本的CSS在HTML页面上制作三角形。我正在使用需要加载时间的三角形图片，因此我希望减少页面加载时间。

- Ali

---

要了解这个形状是如何工作的，并寻找替代解决方案，请访问 https://dev59.com/Ymw05IYBdhLWcg3wuUAL。 - web-tiki

Answer 1

在 HTML 中无法实现，但是可以使用 CSS。示例：

<div class="triangle></div>

.triangle {
    width: 0;
    height: 0;
    border: solid 30px;
    border-color: transparent transparent black transparent;
}

在线演示：jsFiddle

• border属性中的30px定义了三角形的大小：宽度和高度。如果你想要一个更小或者更大的三角形，可以进行调整。
• 如果你想要旋转三角形，请在border-color属性中交换black和transparent的位置。参见jsFiddle

- Nikola K.

---

请注意，如果保留两个边框，将得到直角三角形，这可以帮助您生成所需的任何三角形。请参考我的答案和 http://jsfiddle.net/GR4Kj/5/ http://www.uselesspickles.com/triangles/ - Ruan Mendes

Answer 2

这是关于如何创建CSS三角形的最佳解释：http://www.uselesspickles.com/triangles/

通过创建没有宽度或高度的div，当您将某些边框设置为透明时，边框会创建一个三角形。

荣誉这个页面是由一位同事编写的，在其他人发现这个技巧之前就已经完成了。

#tri {
  width: 0;
  height: 0;
  border-top-width: 20px;
  border-top-style: solid;
  border-top-color: transparent;
  border-right-width: 20px;
  border-right-style: solid;
  border-right-color: red;
}

<div id="tri"></div>

jsFiddle演示

- Ruan Mendes

Answer 3

这将创建一个三角形

<svg width="100" height="100">
    <polygon points="50, 50, 100, 100, 0, 100" fill="yellow" />
</svg>

- Jak

Answer 4

制作 CSS 三角形的技巧是：

1. 创建一个空的 div 元素
2. 将其高度和宽度设置为0。
3. 给两个相对的边设置相同的边框宽度并使它们透明。
4. 给第三个边设置相同的边框宽度，并将其设置为实心颜色。

希望这有所帮助。

请查看此jsFiddle链接。

- mtk

---

不起作用。除非您在解释中错过了一步。JSFiddle。 - Roddy of the Frozen Peas

感谢更新！！！如果您能解释或有其他想法/技巧，请更新。 - mtk