CSS中一个占据整个宽度且高度固定的三角形？

Question

我正在尝试使用CSS制作一个等宽但高度固定的三角形。

我已经成功地用线性渐变实现了这个效果，代码如下：

.triangle {
    width: 100%;
    height: 120px;
    background: linear-gradient(to right bottom, blue 50%, transparent 50%);
}

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

但是对角线看起来不够清晰。我该如何在CSS中做到同样的效果而不使用渐变？

- Thomas

Answer 1

您可以稍微模糊边缘。

.triangle {
    width: 100%;
    height: 120px;
    background: linear-gradient(to right bottom, blue 49.5%, transparent 50%);
}

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

如上所述，边框的实现可以采用类似以下方式：

.triangle {
  width:0;
  border-style:solid;
  border-width: 0px 0px 120px 100vw;
  border-color:transparent transparent transparent blue ;
}

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

最好使用SVG ...

- G-Cyrillus

Answer 2

为什么不尝试使用边框宽度而不是渐变属性。我已经实现了一个使用边框宽度的版本，可以使边界更加清晰。这里是可运行的版本。

.triangle {
    width: 100%;
    height: 120px;
    background: linear-gradient(to right bottom, blue 50%, transparent 50%);
}
.container{
  width : 300px;
}
.triangleUsingbordermethod {
    
    border-top-color: blue;
    border-top: 60px solid blue;
    border-left: 50% solid black;
    border-left: 150px solid blue;
    border-right: 150px transparent solid;
    border-bottom: 60px transparent solid;
}

<div class='container'>
 <div class="triangleUsingbordermethod"></div>
</div>

- simbathesailor

---

为什么不在你的回答中提供一个可工作的代码片段，而是使用一个链接的技巧呢？ - G-Cyrillus

嘿@GCyrillus：我以前不知道怎么做，现在我学会了。谢谢。 - simbathesailor

Answer 3

诀窍是用边框制作三角形。由于CSS不允许在border-width中使用百分比，因此我使用100vh代替100％。

请尝试这个：

.triangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 0px 120px 100vw;
    border-color:transparent transparent transparent blue ;
}

- Koby Douek

---

有趣！但是你的三角形的宽度是100％的高度，而不是宽度。 - Thomas