html - 将百分比值设置为 border-width

Question

我正在尝试使用 CSS border“hack”从 div 的底部切掉一个三 Angular 形。 (创建一个宽度和高度为 0 的对象并给它一个大的 ol' 边框，并使边框的一侧透明，另一侧为纯色)。

我的问题是有问题的 div 有一个百分比宽度。因此，我的边框也需要有一个百分比宽度(以及可能的高度，这是另一个潜在的问题，因为 div 没有指定的高度)。但是，css border-width 属性似乎不支持百分比值。

从响应式 div 底部“砍掉”三 Angular 形的问题的替代解决方案也可以。

在有人建议使用图像或附加图像之前我不能，因为整个事物都有一个模式并且它不匹配。由于兼容性，我也不想使用多个背景图像。

Answer 1

仅使用 CSS 是不可能的。对于此类的 hack，您可以使用窗口调整大小事件。

$w = $(window);
$w.resize(onResize);

function onResize(){

    $("div").css({
        "border-bottom-width": $w.width()*0.12,
        "border-left-width": $w.width()*0.1,
        "border-right-width": $w.width()*0.1
    });

}
onResize();​

用你的CSS

div{
    border-color:blue;
    border-style: solid;
    border-top:0px;
    border-left:10px solid transparent;
    border-right:10px solid transparent;
    width:0px;
    height:0px;
}

http://jsfiddle.net/vuZaw/