CSS三角形边框宽度不适用于相对于父级的百分比值[重复]答案

【问题标题】：CSS triangle border-width does not work with percentage value relative to the parent [duplicate]CSS三角形边框宽度不适用于相对于父级的百分比值[重复]
【发布时间】：2015-06-30 18:06:04
【问题描述】：

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

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

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

我想制作直角三角形宽度100%，但它完全不起作用。我知道我可以添加width:100%;，但三角形看起来不太好，我必须用px 调整对角线。那不方便。因为如果我把窗口变小，三角形就不会缩放。

谁能帮我解决这个问题？

【问题讨论】：

标签： css css-shapes

【解决方案1】：

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

<line-width> = <length> |薄 |中 |厚

其中<length> 是<number>，后跟长度单位：px, em, rem, ...。

话虽如此，一种可能的 CSS 选项是使用viewport relative unit vw 根据视口的宽度设置边框的宽度。

在这种情况下，您只需要计算父元素相对于视口宽度的宽度即可。如果父级填充了整个水平空间，请使用100vw；如果它填满了视口的一半：50vw 等等。

body { margin: 0; }

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

&lt;div&gt;&lt;/div&gt;

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

【讨论】：

【解决方案2】：

边框不能以百分比表示，请参阅specification。

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

【讨论】：