css border-width yüzdesi

Question

Bir div sarma başka nedenle

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

kapsayıcı 100 piksel bir boyut 100px olduğunu varsayalım gibi var. 0px yükseklik ve 0px genişliğe sahip olmak istiyorum. Bununla birlikte, kutunun sol kenarının konteynırın% 50'sini ve kutunun diğer% 50'sini doldurmak için kutunun sağ kenarını doldurmasını istiyorum.

Bunu css ile nasıl yapabilirim?

Answer 1

Ardından yaptığınız şeyi yapabilir, ancak sınırlar yerine doğrusal gradyanları kullanabilirsiniz.

aşağıdaki işaret kullanın:

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

Sadece .box eleman işe Bunun için bir kare olması gerektiğini unutmayın:

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

Ve aşağıdaki stilleri (örnek: http://jsfiddle.net/HxbnK/) doğru şekilde.

Answer 2

El ile 50px sınır genişliği olarak hesaplama ve belirleme kısa, yapamazsınız. border-width özelliği yalnızca uzunlukları veya thin, medium ve thick anahtar sözcüklerini kabul eder.

Saad Imran'ın önerdiği gibi, her biri% 50 genişliğinde iki div s kullanabilirsiniz.

Answer 3

Sadece