css border-width percentage [英] css border-width percentage
本文介绍了css border-width percentage的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个div包装另一个像这样
I have one div wrapping another like so
<div id="container"><div id="box"></div></div>
假设容器的尺寸为100x100像素。我想要盒子有0px高度和0px宽度。但是,我想让框的左边框填充容器的50%,框的右边框填充容器的另外50%。
Let's say the container has a dimension 100px by 100px. I want to box to have 0px height and 0px width. However, I want the left border of the box to fill up 50% of the container, and the right border of the box to fill up the the other 50% of the container.
我如何用css这样做?
How do I do this with css?
推荐答案
。
使用以下标记:
<div class="box"></div>
a href =http://jsfiddle.net/HxbnK/> http://jsfiddle.net/HxbnK/ ):
And the following styles (example: 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
元素需要是一个正方形才能正常工作。
Just keep in mind that the .box
element needs to be a square for this to work correctly.
这篇关于css border-width percentage的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文