html - css 边框宽度百分比

Question

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

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

假设容器的尺寸为 100 像素 x 100 像素。我想框有 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 建议的那样，您也许可以只使用两个div宽度为 50% 的 s。