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

<分区>

我用这段 CSS 代码制作了一个直 Angular 三 Angular 形:

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

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

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

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

最佳答案

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

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

在哪里 <length> 是 <number> 后跟长度单位:px, em, rem, ... .

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

在这种情况下，您只需要计算父元素相对于视口(viewport)宽度的宽度。如果父级填满整个水平空间，则使用 100vw ;如果它填满视口(viewport)的一半: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视口(viewport)百分比长度 is supported in IE9+ .

关于CSS 三 Angular 形边框宽度不适用于相对于父级的百分比值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29808462/

相关文章：

c# - 在特定位置动态添加按钮