0

divCSS border「ハック」を使用して、a の底から三角形を切り取ろうとしています。(幅と高さが 0 のオブジェクトを作成し、大きな境界線を付けて、境界線の片側を透明にし、反対側を単色にします)。

私の問題は、問題divの幅がパーセンテージであることです。したがって、境界線にはパーセンテージ幅も必要です (またdiv、指定された高さがないため、別の潜在的な問題である可能性のある高さ)。ただし、cssborder-widthプロパティはパーセンテージ値をサポートしていないようです。

レスポンシブの下部から三角形を「切り刻む」という問題に対する代替ソリューションも問題ありdivません。

全体にパターンがあり、一致しないため、誰かが画像の使用または追加を推奨する前に、私はできません。また、互換性のために複数の背景画像を使用したくありません。

4

2 に答える 2

1

CSS のみを使用することはできません。このクラスのハックには、ウィンドウのサイズ変更イベントを使用できます。

$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 に答える