İki tonlu düz renk olarak kenarlık resmi doğrusal degrade

Question

Bu kutuyu, iki ton düz renk olarak oluşturulan doğrusal bir degrade arka plana sahip ediyorum. Bir renk 44px'dir - gerisinde olduğu gibi başka bir renk daha vardır:

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

Harika çalışıyor. Şimdi, kenarlıktaki renklerin arka planın rengini takip etmesini sağlamak için, sınır görüntü doğrusal geçişlerini kullanarak bu öğenin üstüne ve altına iki tonlu bir kenarlık eklemek istiyorum. Hile, doğrusal gradyanları düz renkler olarak kullanmaktır.

Böyle bir şey denedim:

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

Ama obviousley, işe yaramıyor.

Bu işi nasıl yapabileceğine dair herhangi bir fikrin var mı?

JsFiddle here.

Answer 1

border-image özelliğinin sonuna number eklemeniz gerekir. Senin durumunda hiçbir etkisi yok ama yine de gerekli. Ayrıca görmek kolaydır bu yüzden mavi renk aldı to right yerine

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>

right kullanımı.

DÜZENLEME: Ayrıca mümkün vibhu olarak öne:

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

Answer 2

Sen ek kod ::

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 Buraya eklenen aşağıda kullanarak iki ton sınırını ekleyebilirsiniz: https://jsfiddle.net/y2Ln2h86/