html - css ボーダー幅のパーセンテージ

Question

私は1つのdivを別のようにラップしています

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

コンテナのサイズが 100px x 100px だとします。高さ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これが正しく機能するには、要素が正方形である必要があることに注意してください。

Answer 2

好きpxに変えるだけvw

border-width: 10px;

に

border-width: 10vw;

その何パーセントが何をするか....

Answer 3

境界線の幅として手動で計算して指定する50px以外はできません。このborder-widthプロパティは、長さまたはキーワードthin、mediumおよびのみを受け入れますthick。

divSaad Imran が示唆しているように、それぞれ 50% 幅の s を2 つだけ使用できる場合があります。