Say a container has a dim...">
Geek asks and answers

Css border-width percent

I have one div that wraps another one so

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

Say a container has a dimension of 100px by 100px. I want the window size to be 0px and width 0px. However, I want the left border of the box to fill 50% of the container, and the right border of the box to fill the remaining 50% of the container.

How to do this with css?

+5
source share
3 answers

You can do what you need, but use linear gradients instead of borders.

Use the following markup:

<div class="box"></div>​

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;
}​

Just keep in mind that the item .boxmust be a square for it to work properly.

+8
source

px vw

border-width: 10px;


border-width: 10vw;

, ....

+2

With the exception of manual calculation and defining 50pxas the width of the border, you cannot. The property border-widthallows only lengths or keywords thin, mediumand thick.

As Saad Imran says, you can only use two divwith a width of 50% each.

0
source

More articles:


All Articles