CSS 三角形边框宽度不适用于相对于父项的百分比值

Question

我用这个 CSS 代码做了一个直角三角形：

height: 0;
border-width: 0 0 100px 1000px;
border-color: transparent red red transparent;
border-style: solid;

问题是，我不能用 % 代替 px。

我想做直角三角形的宽度100%但是完全不行。我知道我可以添加 width:100%;，但三角形看起来不太好，我将不得不用 px 调整对角线。那不是很方便。因为如果我把 window 变小，三角形就不会缩放。

有人可以帮我解决这个问题吗？

Answer 1

边框不能为百分比，参见 specification。

试试看我以前的问题，How to create an triangle shape (fixed height, width=100%) with background，它可以帮助你。

Answer 2

border-width 不能有百分比值。允许的值为：

<line-width> = <length> | thin | medium | thick

其中<length> is a <number>后跟长度单位：px, em, rem, ....

也就是说，一种可能的 CSS 选项是使用 viewport relative unit vw 根据视口的宽度设置边框的宽度。

在那种情况下，您只需要计算父元素相对于视口宽度的宽度。如果父级填充整个水平 space，则使用 100vw；如果它填满视口的一半：50vw 依此类推。

body { margin: 0; }

div {
  height:0;
  border-width:0 0 100px 100vw;
  border-color:transparent red red transparent;
  border-style:solid;
}

<div></div>

值得一提的是 vw 视口百分比长度 is supported in IE9+。

CSS triangle border-width does not work with percentage value relative to the parent