如何在 HTML 中制作三角形？

Question

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

原文由 Ali 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

HTML 不可能，但 CSS 可以。例子：

 <div class="triangle></div>

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

现场演示： jsFiddle

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

原文由 Nikola K. 发布，翻译遵循 CC BY-SA 3.0 许可协议