Question

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

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

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 demo

Answer 3

制作css三角形背后的技巧是

创建一个空的div
使其高度和宽度为0。
给两个相对的边相同的边框宽度，使它们透明。
给第三个边框宽度相同的边框，给它一个纯色。

希望这有帮助。

选中此jsFiddle

Answer 4

这将形成一个三角形

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

如何在HTML中创建三角形？

4 个答案: