css 边框宽度百分比答案

【问题标题】：css border-width percentagecss 边框宽度百分比
【发布时间】：2012-09-05 00:51:19
【问题描述】：

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

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

假设容器的尺寸为 100 像素 x 100 像素。我想框有 0px 高度和 0px 宽度。但是，我希望盒子的左边框填满容器的 50%，而盒子的右边框填满容器的其他 50%。

如何使用 css 做到这一点？

【问题讨论】：

为什么不设置两个DIVs，每个宽度为 50%？
因为我想要梯形的边框

标签： html css border

【解决方案1】：

只要把px改成vw就好了

border-width: 10px;

到

border-width: 10vw;

它的作用是百分比......

【讨论】：

这个解决方案的唯一问题是它不被许多浏览器支持。 caniuse.com/#feat=viewport-units

【解决方案2】：

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

使用以下标记：

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

【讨论】：

【解决方案3】：

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

正如 Saad Imran 建议的那样，您也许可以只使用两个 divs，每个宽度为 50%。

【讨论】：

但我想要边框的梯形形状......基本上如果我制作边框宽度：0% 50% 80% 50%;我将能够在盒子里有一个三角形。然后我可以在盒子下面再画一个div来做一个树干！！！顶部的三角形是树叶！
我想在树干和树叶中种植大量大小不一、高度不一的树木。无论如何，我现在通过这样做 jl.evermight.com/sunrise 作弊。如果我能把那些树叶改成三角形就好了。