divオーバーレイの2つのボトムボーダーを作る方法は？私の理想的な結果は、オレンジ色の境界線を持っている、しかし、である</p> <p><a href="https://i.stack.imgur.com/GLzZo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GLzZo.png" alt="![enter image description here"></a></p> <p>：以下

Question

は、それが現在の結果である

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
    border-bottom-width: 2px; 
 
    border-bottom-color: gray; 
 
    border-bottom-style: solid; 
 
} 
 

 
.label { 
 
    border-bottom-width: 2px; 
 
    border-bottom-color: orange; 
 
    border-bottom-style: solid; 
 
}

<div class=container> 
 
    <div class=label> 
 
    Hello 
 
    </div> 
 
</div>

私のHTMLとCSSのコードですdivdivの灰色の枠線を完全にオーバーレイします。ここにイラストがあります。

私は、調整されたパディングとマージンを試みたが、明らかに、変化は同様に、コンテナのサイズを変更します学位論文ので、私は私の望ましい結果を達成することはできません。

cssを使用して実現することはできますか？

Answer 1

は.containerのborder-bottom-widthと必要に応じていくつかの左/右paddingに.label同等に負margin-bottomを追加します。

.container { 
 
    display: flex; 
 
    justify-content: center; 
 
    border-bottom-width: 2px; 
 
    border-bottom-color: gray; 
 
    border-bottom-style: solid; 
 
} 
 

 
.label { 
 
    border-bottom-width: 2px; 
 
    border-bottom-color: orange; 
 
    border-bottom-style: solid; 
 
    padding: 0 10px; 
 
    margin-bottom: -2px; 
 
}

<div class=container> 
 
    <div class=label> 
 
    Hello 
 
    </div> 
 
</div>