Độ dốc của đường viền hình ảnh dưới dạng màu hai tông màu

Question

Tôi có hộp này với nền đường thẳng được tạo thành màu hai tông màu. Một màu là 44px - phần còn lại có một màu khác, như sau:

background: linear-gradient(to left, #365aa5 44px, #f5f5f5 0); 

Làm việc tuyệt vời. Bây giờ tôi muốn thêm một đường viền hai tông màu lên trên cùng và dưới cùng của phần tử này bằng cách sử dụng các đường viền tuyến tính của hình ảnh đường viền theo cùng một cách - để các màu của đường viền theo màu của nền. Bí quyết là sử dụng gradient tuyến tính như màu sắc rắn.

Tôi đã thử một cái gì đó như thế này:

border-image: linear-gradient(right, #365aa5 44px, #000 0); 
border-style: solid; 
border-width: 2px 0 2px 0; 

Nhưng obviousley, nó không làm việc.

Bất kỳ ý tưởng nào về cách tôi có thể thực hiện công việc này?

JsFiddle here.

Answer 1

Bạn cần thêm number vào cuối thuộc tính border-image. Trong trường hợp của bạn nó không có hiệu lực nhưng nó vẫn còn cần thiết. Cũng sử dụng to right thay vì right

div { 
 
    height: 50px; 
 
    width: 80%; 
 
    padding: 4px; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
    background: linear-gradient(to left, #365aa5 44px, #f5f5f5 0); 
 
    /* What I'm trying: */ 
 
    border-image: linear-gradient(to right, #365aa5 44px, #f5f5f5 0) 1; 
 
    border-style: solid; 
 
    border-width: 2px 0 2px 0; 
 
} 
 

 

 
body { 
 
    padding: 20px; 
 
    background-color: #fff; 
 
}

<div>Two tone solid color top and bottom border to<br> match the two tone background</div>

tôi lấy màu xanh nên nó dễ dàng hơn để xem.

EDIT: Cũng có thể là vibhu gợi ý:

border-image: linear-gradient(to right, #365aa5 44px, #f5f5f5 0); 
border-image-slice: 1; 

Answer 2

Bạn có thể thêm biên giới hai giai điệu bằng cách sử dụng dưới đây mã bổ sung ::

div::after { 
content: ""; 
position: absolute; 
height: 2px; 
width: 44px; 
right: 0; 
background: #365aa5; 
top: -2px; 
} 


div::before { 
content: ""; 
position: absolute; 
height: 2px; 
width: 44px; 
right: 0; 
background: #365aa5; 
bottom: -2px;} 

Jsfiddle thêm ở đây: https://jsfiddle.net/y2Ln2h86/