ボーダーの高さ私のdivの高さの50％をCSSを使ってどうやって？

Question

注：私はすべての質問を試しました&答えはこのトピックに関連しています。さらに、私は関連する質問を試み、それを解決しようとしましたが、成功しませんでした。だから私の質問をよく読んでください。

境界線の高さを50%に設定して、divの高さと比較したいと考えています。

私は

.sing-wrapper { 
 
    border-left: 3px solid #999; 
 
    border-bottom: 3px solid #999; 
 
    height:10%; 
 
    width:220px; 
 
    padding: 10px; 
 
    border-bottom-left-radius: 25px; 
 
    display: inline-table; 
 
    position: relative; 
 
} 
 
.cmpny-label 
 
{ 
 
\t display: inline-block; 
 
    position: absolute; 
 
    right: 0; 
 
    padding-left: 5px; 
 
    background-color:#FFF; 
 
}

<div class="sing-wrapper"> 
 
<div style="width:100%;height:100%;"> 
 

 
Hello Friends Sign <br> 
 
Hello Friends Sign <br> 
 
Hello Friends Sign <br> 
 
Hello Friends Sign <br> 
 
Hello Friends Sign <br> 
 

 
</div> 
 
<div class="cmpny-label"> 
 
<i style="color:#ccc;"> Signed With my Company 
 
</div> 
 
</div>

Answer 1

をコーディングしてみてください以下は、アプローチ、以下のようなものを持つことができ、この

を好きにしたいです。白い背景

.sing-wrapper:after { 
    content: ''; 
    height: 50%; 
    width: 3px; 
    position: absolute; 
    left: -3px; 
    top: 0; 
    background-color: white; 
} 

.sing-wrapper { 
 
    border-left: 3px solid #999; 
 
    border-bottom: 3px solid #999; 
 
    height:10%; 
 
    width:220px; 
 
    padding: 10px; 
 
    border-bottom-left-radius: 25px; 
 
    display: inline-table; 
 
    position: relative; 
 
} 
 

 
.sing-wrapper:after { 
 
    content: ''; 
 
    height: 50%; 
 
    width: 3px; 
 
    position: absolute; 
 
    left: -3px; 
 
    top: 0; 
 
    background-color: white; 
 
} 
 

 
.cmpny-label{ 
 
\t display: inline-block; 
 
    position: absolute; 
 
    right: 0; 
 
    padding-left: 5px; 
 
    background-color:#FFF; 
 
}

<div class="sing-wrapper"> 
 
<div style="width:100%;height:100%;"> 
 

 
Hello Friends Sign <br> 
 
Hello Friends Sign <br> 
 
Hello Friends Sign <br> 
 
Hello Friends Sign <br> 
 
Hello Friends Sign <br> 
 

 
</div> 
 
<div class="cmpny-label"> 
 
<i style="color:#ccc;"> Signed With my Company 
 
</div> 
 
</div>