CSS中的三角形采用固定高度的整个宽度？答案

【问题标题】：A triangle in CSS that takes the whole width with a fixed height?CSS中的三角形采用固定高度的整个宽度？
【发布时间】：2017-03-18 18:02:30
【问题描述】：

我正在尝试在 CSS 中创建一个三角形，它采用固定高度的父级的整个宽度。

我用这样的线性渐变成功地做到了：

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

&lt;div class="triangle"&gt;&lt;/div&gt;

但对角线看起来并不清晰。不使用渐变如何在 CSS 中做同样的事情？

【问题讨论】：

标签： html css shape

【解决方案1】：

你可以稍微模糊一下边缘

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

&lt;div class="triangle"&gt;&lt;/div&gt;

提到的边界方法可以通过这种方式进行类似：

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

&lt;div class="triangle"&gt;&lt;/div&gt;

最好使用 SVG ....

【讨论】：

【解决方案2】：

诀窍是在边界之外制作一个三角形。由于 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 ;
}

【讨论】：

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

【解决方案3】：

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

.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>

【讨论】：

你为什么不在你的答案中做一个有效的sn-p而不是使用一个技巧来链接它？
嘿@GCyrillus：我不知道该怎么做。我现在学会了。谢谢