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 元素必须是正方形才能正常工作。