使用css我的div高度边框高度50％怎么样？

Question

注意：我尝试了所有问题＆amp;与此主题相关的答案。此外，我尝试了相关的问题，并尝试解决它，但没有成功。所以请仔细阅读我的问题。

我想将边框高度设置为50%以与我的div高度进行比较。

我想要这样

下面我尝试编码

＆＃13;

＆＃13;

.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
{
	display: inline-block;
    position: absolute;
    right: 0;
    padding-left: 5px;
    background-color:#FFF;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你可以拥有类似下面的方法。添加具有白色背景的伪元素

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

＆＃13;

＆＃13;

.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{
	  display: inline-block;
    position: absolute;
    right: 0;
    padding-left: 5px;
    background-color:#FFF;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;