Question

我正在尝试使用CSS div“hack”从border的底部删除一个三角形。（创建一个0宽度和高度的对象，并赋予它一个大的边框，使边框的一边透明，另一边是纯色）。

我的问题是有问题的div有一个百分比宽度。因此，我的边界也需要具有百分比宽度（并且可能的高度是另一个潜在的问题，因为div没有指定的高度）。但是，css border-width属性似乎不支持百分比值。

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

在某人建议使用图片或附加图片之前，我不能，因为整个图片都有图案且不匹配。此外，由于兼容性，我不想使用多个背景图像。

Answer 1

仅使用CSS是不可能的。对于这个类的hack，你可以使用window resize事件。

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

Answer 2

以防万一有人希望将来这样做我调整了Scipions的答案，所以根据父宽度调整大小而不是窗口宽度（这更有意义）：

jQuery(document).ready(function($) {

    $o = jQuery(".topCart");
    $w = $(window);
    $w.resize(onResize);

function onResize(){

    $(".bottomBorder").css({
        "border-top-width": $o.width()*0.2,
        "border-left-width": $o.width()*0.52,
        "border-right-width": $o.width()*0.5
    });

}
onResize();
});

它很有效。我觉得这很酷，所以希望其他人也觉得它很有用。

将百分比值设置为border-width

2 个答案: