html – CSS中的一个三角形,它采用固定高度的整个宽度？

概述我正在尝试在CSS中创建一个三角形,它使父级的整个宽度具有固定的高度. 我用这样的线性渐变成功地做到了这样： .triangle { width: 100%; height: 120px; background: linear-gradient(to right bottom, blue 50%, transparent 50%);} <div class="triang 我正在尝试在CSS中创建一个三角形,它使父级的整个宽度具有固定的高度.

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

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

<div ></div>

但对角线看起来并不清晰.如何在不使用渐变的情况下在CSS中执行相同的 *** 作？

解决方法 你可以稍微模糊边缘

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

<div ></div>

提到的边界方法可以这样做：

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

<div ></div>

最好是使用SVG ….

总结

以上是内存溢出为你收集整理的html – CSS中的一个三角形,它采用固定高度的整个宽度？全部内容，希望文章能够帮你解决html – CSS中的一个三角形,它采用固定高度的整个宽度？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。