Question

我有一个div包装另一个像这样

<div id="container"><div id="box"></div></div>

假设容器的尺寸为100px×100px。我希望盒子的高度为0px，宽度为0px。但是，我希望盒子的左边框填满容器的50％，并且盒子的右边框填满容器的另外50％。

如何使用css执行此操作？

Answer 1

你可以做你想做的事，但是使用线性渐变而不是边框。

使用以下标记：

<div class="box"></div>

以下样式（例如：http://jsfiddle.net/HxbnK/）：

.box {
    background-image: linear-gradient(154deg, red 50%, transparent 50%),
                      linear-gradient(26deg, red 50%, transparent 50%);
    background-position: 0 0, 100% 0;
    background-repeat: no-repeat;
    background-size: 50% 100%;
    height: 100px;
    width: 100px;
}

请记住，.box元素必须是一个正方形才能使其正常工作。

Answer 2

只需将px更改为vw

即可

border-width: 10px;

到

border-width: 10vw;

它做了多少百分比....

Answer 3

如果没有手动计算并指定50px作为边框宽度，则不能。 border-width属性仅接受长度或关键字thin，medium和thick。

正如Saad Imran建议的那样，你可能只能使用宽度为50％的两个div。

css边界宽度百分比

3 个答案: