Css 边框百分比宽度

是否有任何选项将伪元素（：before）边框宽度（高度）设置为与不带px单位的容器（带流体高度）高度相同

html:

---

fiddle:

根据您的第一个问题，尝试此jQuery解决方案：

HTML:

<div id="container">
<div class="test"></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam magni nesciunt sit consectetur dolore quos veritatis aliquam modi consequuntur quibusdam ratione molestias earum optio asperiores nemo quam dignissimos iure recusandae?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam magni nesciunt sit consectetur dolore quos veritatis aliquam modi consequuntur quibusdam ratione molestias earum optio asperiores nemo quam dignissimos iure recusandae?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam magni nesciunt sit consectetur dolore quos veritatis aliquam modi consequuntur quibusdam ratione molestias earum optio asperiores nemo quam dignissimos iure recusandae?
</div>

#container{
    width:50%;
    margin:0 auto;
    position:relative;
    padding: 5px;
}

.test{
    height:100%;
    width:auto;
    position:absolute;
    border-top: 300px solid #05ed08;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;   
    right:-45px;
    left:-45px;
    z-index:-1;
    top:0;
    bottom:0;
}

var divHeight = $('div#container').height() + 10;

$('#container').css('height', divHeight+'px');
$('.test').css('border-top', divHeight+'px solid #05ed08');

jQuery:

<div id="container">
<div class="test"></div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam magni nesciunt sit consectetur dolore quos veritatis aliquam modi consequuntur quibusdam ratione molestias earum optio asperiores nemo quam dignissimos iure recusandae?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam magni nesciunt sit consectetur dolore quos veritatis aliquam modi consequuntur quibusdam ratione molestias earum optio asperiores nemo quam dignissimos iure recusandae?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam magni nesciunt sit consectetur dolore quos veritatis aliquam modi consequuntur quibusdam ratione molestias earum optio asperiores nemo quam dignissimos iure recusandae?
</div>

#container{
    width:50%;
    margin:0 auto;
    position:relative;
    padding: 5px;
}

.test{
    height:100%;
    width:auto;
    position:absolute;
    border-top: 300px solid #05ed08;
    border-left: 45px solid transparent;
    border-right: 45px solid transparent;   
    right:-45px;
    left:-45px;
    z-index:-1;
    top:0;
    bottom:0;
}

var divHeight = $('div#container').height() + 10;

$('#container').css('height', divHeight+'px');
$('.test').css('border-top', divHeight+'px solid #05ed08');

演示：

---

注意：尝试添加看到高度增加的内容。

您的问题不清楚，但如果您尝试使用CSS绘制形状，你可以试试这个：@ArbaouiMehdi，但是没有机会使用容器的流体高度你喜欢用CSS绘制什么类型的形状？如果你想同时增加

高度

和

边框顶部

，你可以使用jqueryy你可以在小提琴中看到它？！像倒梯形的东西。角度的锐度取决于容器的高度。p、 答：您的链接与我的示例相同。在您的情况下，如果不增加高度和边框顶部，就不可能使内容适应您的区块，这就是我选择jQuery解决方案的原因