2トーンのベタ画像の境界線の線形勾配

Question

このボックスには、2トーンの単色として作成された線形グラデーションの背景があります。 1つの色は44ピクセルです。残りの色は次のようになります。

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

素晴らしいです。今度は境界線の線形グラデーションを同じ方法で使用して、この要素の上部と下部に2トーンの境界線を追加して、境界の色が背景の色に追従するようにしたいと思います。トリックは、直線のグラデーションをソリッドカラーとして使用することです。

私はこのような何かを試してみました：

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

しかしobviousley、それは働いていません。

どのように私はこの作品を作ることができましたか？

JsFiddle here。

Answer 1

border-imageプロパティの末尾にnumberを追加する必要があります。あなたのケースでは効果はありませんが、依然として必要です。また、見やすいですので、私は青い色をしたto 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>

rightの使用。

EDIT：また可能vibhuが提案されているよう：

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

Answer 2

をあなたは追加のコードの下に使用して、2つのトーンの境界線を追加することができます::

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がここに追加：https://jsfiddle.net/y2Ln2h86/

を