将百分比值设置为边框宽度答案

【问题标题】：Setting a percentage value to border-width将百分比值设置为边框宽度
【发布时间】：2012-12-13 21:30:24
【问题描述】：

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

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

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

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

【问题讨论】：

您好，我们可以看到一些代码吗？
tigatest.co.uk/cushion 抱歉弄得一团糟！就是右上角的那个购物车，我想让它看起来像这样：imgur.com/Mtp9u
请提供一些代码或说明您要执行的操作。您希望它看起来像的屏幕截图或图像会很有帮助。

标签： html css responsive-design

【解决方案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/

【讨论】：

【解决方案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();
});

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

【讨论】：