Question

我使用这个CSS代码创建了一个直角三角形：

问题是，我无法使用px代替100%。

我想制作直角三角形宽度width:100%;，但它完全不起作用。我知道我可以添加px，但三角形看起来不太好，我将不得不用db.students.update( { _id: 1 }, { $push: { scores: 89 } } )调整对角线。这不方便。因为如果我把窗口缩小，三角形就不会缩放。

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

Answer 1

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

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

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

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

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

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

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

Answer 2

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

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

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

2 个答案: