css border-left 50% height

Question

Tôi muốn đường viền trái của div của tôi chỉ hiển thị một nửa của div. Điều tương tự tôi muốn làm với biên giới bên phải của tôi nhưng nên được đặt từ dưới cùng của div đến giữa div. Làm thế nào tôi có thể đạt được nó?

Answer 1

Câu hỏi hay. Không thể sử dụng thuộc tính đường viền.

Điều duy nhất nảy ra trong đầu, nếu bạn có thể đặt số div của bạn là position thành relative, là sử dụng một vị trí tuyệt đối, rộng 1 pixel div. kiểm tra không triệt để nhưng điều này nên công việc:

<div style='width: 1px; top: 0px; bottom: 50%; left: 0px; 
      background-color: blue; overflow: hidden'> 
&nbsp; 
</div> 

Bạn muốn làm điều tương tự ở phía bên tay phải, thay thế left sở hữu bởi right.

Hãy nhớ rằng, xung quanh div cần phải là position: relative để làm việc này. Tôi không chắc liệu cài đặt chiều cao 50% có hoạt động nhất quán trong suốt các trình duyệt hay không - hãy đảm bảo bạn thử nghiệm nó. Bạn có thể phải sử dụng các biện pháp pixel nếu không.

Answer 2

Một sắp xếp của cách tiếp cận tương tự nhưng khác nhau để @ Pekka của: sử dụng giả selector :after, như vậy:

HTML Markup:

<div class="mybox"> 
    Le content de box. 
</div> 

CSS:

.mybox { 
    position: relative; 
    padding: 10px 20px; 
    background-color: #EEEEEE; 
} 

.mybox:after { 
    content: ''; 
    position: absolute; 
    bottom: 0px; 
    left: 25%; 
    width: 50%; 
    border-bottom: 1px solid #0000CC; 
} 

... và jsFiddle để có biện pháp tốt.

Answer 3

Bạn có thể sử dụng:

line-height:50%; /*(or less, much less)*/ 
overflow:visible; 

Các văn bản có thể nhìn thấy, nhưng màu sắc biên giới sẽ chỉ ở một nửa kích thước div.

Answer 4

2018: Đối trình duyệt hiện đại:

Bạn có thể sử dụng border-image với gradient một cái gì đó giống như ...

border-image: linear-gradient(to bottom, rgba(0,0,0,0) 25%,rgba(0,0,0,1) 25%,rgba(0,0,0,1) 75%,rgba(0,0,0,0) 75%); 
border-image-slice: 1; 

Demo:https://jsfiddle.net/hz8wp0L0/

Tool:Gradient Editor

Tôi có thể sử dụng:border-image(IE11)