CSS三角形是如何工作的？

Question

CSS三角形是如何工作的？

2023

在CSS Tricks - Shapes of CSS网站上有许多不同的CSS形状，我特别困惑于一个三角形：

CSS Triangle

#triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

<div id="triangle-up"></div>

它是如何运作以及为什么有效？

- Stanislav Shabalin

64

你可以：http://jsfiddle.net/wbZet/ - mskfisher

61

那个不在的正方形怎么办？http://jsfiddle.net/minitech/sZgaa/ - Ry-

1

@mskfisher 你等边三角形底部边框的大小不应该是 ceil(sqrt(3) * 60) 吗？再多几个像素！ - Niloct

1

@Niloct：我快速地用大致的数字估算了一下。你说得对，更精确的等边测量应该是（边长：58，底边：100）或（边长：60，底边：104）。 - mskfisher

1

这是一个适用于各种方向和大小的优秀CSS三角形生成器：http://apps.eky.hk/css-triangle-generator/ - Allan Stepps

显示剩余4条评论

23个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Stephen Quan · Answer 1

阅读其他答案后，我发现这里有很好的解释为什么 CSS 三角形能够按照它的方式工作。我认为它有点像一个技巧，而不是通用的东西。

对于更容易阅读和维护的内容，我建议您在 SVG 中定义几何图形。

然后，您可以通过添加"data:image/svg+xml,"前缀来使用数据 URI 将该 SVG 转换。作为数据 URI，它现在可以作为 CSS 中的背景图像使用。因为SVG是明文，所以您可以轻松地更新几何图形、描边和填充颜色。

div.tri {
    width: 100px;
    height: 100px;
    display: inline-block;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path  fill="red" d="M31.345 29H1.655L16.5 1.96z"/></svg>');
}

<div>
    <div class="tri"></div>
    <div class="tri"></div>
    <div class="tri"></div>
</div>

- satish mallick · Answer 2

试一下：

.triangle {
    border-color: transparent transparent red transparent;
    border-style: solid;
    border-width: 0px 200px 200px 200px;
    height: 0px;
    width: 0px;
}

<div class="triangle"></div>

- LaZza · Answer 3

clip-path 对我来说效果最好 - 对于具有固定和非固定尺寸的 div/容器都非常有效：

.triangleContainer{
    position: relative;
    width: 500px;
    height: 500px;
}

.triangleContainer::before{
    content: "";        
    position: absolute;
    background:blue;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}