10

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

4

4 回答 4

34

HTML 是不可能的，但 CSS 是不可能的。例子：

<div class="triangle></div>

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

现场演示：jsFiddle

  • 30px在border属性中定义大小：宽度和高度。如果你想要一个更小或更大的三角形，你可以改变它。
  • 如果要旋转三角形，请在属性中切换black和的位置。见jsFiddletransparentborder-color
于 2012-09-18T18:58:44.150 回答
22

这是关于如何创建 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 演示

于 2012-09-18T18:58:59.230 回答
6

这将形成一个三角形

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

于 2018-06-27T14:59:54.563 回答
3

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

  1. 创建一个空div
  2. 使其高度和宽度为0。
  3. 给 2 个相对的边相同的边框宽度并使其透明。
  4. 给第三个相同的边框宽度，给它一个纯色。

希望这可以帮助。

检查这个jsFiddle

于 2012-09-18T19:00:47.997 回答