CSS边框宽度的百分比

我有一个DIV包装另外，像这样CSS边框宽度的百分比

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

比方说，容器具有100像素尺寸100像素。我想框中有0px高度和0px宽度。但是，我希望盒子的左边框填充容器的50％，并且盒子的右边框填充容器的另外50％。

我该如何做到这一点与CSS？

来源

2012-09-12 John

为什么不只是有两个'DIVs'以各占50％的宽度？ –

，因为我想边界的梯形形状 – John

你可以做你以后的事情，但使用线性渐变而不是边界。

使用下列标记：

<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元素需要为这个工作方正确。

来源

2012-09-12 05:19:49 joshnh

哈哈哈，这么聪明。 – John

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

正如Saad Imran所建议的，您可能只能使用两个宽度各为50％的div。

来源

2012-09-12 03:23:52

但我想边界的梯形形状....基本上，如果我使边界宽度：0％50％80％50％;我可以在盒子里有一个三角形。然后我可以在盒子下面再画一个div来制作树干！顶部的三角形是树叶！ – John

为什么不只是使用图像？ –

我想在树干和树叶上有很多随机大小不一的高度的树木。无论如何，我现在通过这个http://jl.evermight.com/sunrise/来欺骗。如果我可以将这些树叶改为三角形，那会很好。 – John

只要改变px到vw像

border-width: 10px;

到

border-width: 10vw;

它做什么百分比做....

来源

2014-04-20 10:31:32

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

CSS边框宽度的百分比

回答

相关问题