jquery - CSS でレスポンシブ トライアングルを作成する

Question

今日、レスポンシブ サイト用に CSS で三角形を作成しようとしていましたが、stackoverflow で適切な例を見つけることができなかったので、その方法を次に示します。

Answer 1

CSS ではパーセンテージを値として使用できないため、角度のある形状をレスポンシブにするのは少し難しいためborder、ページ幅を計算し、それに応じて三角形のサイズを変更する関数をいくつか作成しました。1 つ目はページのロード時にサイズを計算し、2 つ目はページ幅の変更に合わせてサイズを再計算します。

CSS:

.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid rgba(255, 255, 0, 1);
    border-right: 100px solid transparent;
}

HTML:

<div class="triangle"></div>

JS:

$(document).ready(function () {
    var windowWidth = $(window).width();
    $(".triangle").css({
        "border-top": windowWidth / 2 + 'px solid rgba(255, 255, 0, 1)'
    });
    $(".triangle").css({
        "border-right": windowWidth / 1.5 + 'px solid transparent'
    });
});

$(window).resize(function () {
    var windowWidthR = $(window).width();
    $(".triangle").css({
        "border-top": windowWidthR / 2 + 'px solid rgba(255, 255, 0, 1)'
    });
    $(".triangle").css({
        "border-right": windowWidthR / 1.5 + 'px solid transparent'
    });
});

ここにjsFiddleがあります - http://jsfiddle.net/craigcannon/58dVS/17/

Answer 2

親の幅に対して計算されるパディングを利用して、大きな固定幅の三角形をカバーすることにより、レスポンシブな三角形を CSS だけで実現できます。幅 100% の上向き三角形を作成するには:

.triangle-up {
    width: 50%;
    height: 0;
    padding-left:50%;
    padding-bottom: 50%;
    overflow: hidden;
}
.triangle-up div {
    width: 0;
    height: 0;
    margin-left:-500px;
    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-bottom: 500px solid green;
}

または、疑似要素と 1 つの div のみを使用します。

.triangle-up {
    width: 50%;
    height: 0;    
    padding-left:50%;
    padding-bottom: 50%;
    overflow: hidden;
}
.triangle-up:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    margin-left:-500px;
    border-left: 500px solid transparent;
    border-right: 500px solid transparent;
    border-bottom: 500px solid #959595;
}

ここにフィドルがあります。これらがどのように機能するか、および下向き、左向き、右向きの三角形のスニペットに関する完全な説明については、Pure CSS レスポンシブ三角形に関する私の記事を参照してください。指定された CSS は、底辺と高さの比率が 2 の三角形用です。これらの三角形がどのように応答性を偽装するのかを知らずに三角形の比率を変更しようとすると、複雑になる場合があります。

Answer 3

シンプルな CSS を使用して同じことを実現できます

レスポンシブにするには、メディアクエリで使用します..

次の JsFiddle を試してください

http://jsfiddle.net/arunberti/52grj/

.triangle {
    width: 0;
    height: 0;
    border-top: 50px solid rgba(255%, 204%, 0%, 1);
    border-right: 100px solid transparent;
}