0

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

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

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

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

4

2 回答 2

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/

于 2012-12-13T12:32:29.287 回答
0

以防万一有人希望将来这样做，我稍微调整了 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();
});

而且效果很好。我认为这真的很酷，所以希望其他人也会发现它也很有用。

于 2012-12-13T13:30:24.230 回答