Создание адаптивных треугольников с помощью CSS

Сделать угловые формы отзывчивыми немного сложно, потому что вы не можете использовать проценты в качестве значений border в вашем CSS, поэтому я написал пару функций для вычисления ширины страницы и соответствующего изменения размера треугольника. Первый вычисляет размер при загрузке страницы, второй пересчитывает размер при изменении ширины страницы.

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/

Отзывчивых треугольников можно добиться только с помощью 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;
}

Или используя псевдоэлементы и всего один 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;
}

Вот скрипка. Полное объяснение того, как они работают, а также фрагменты треугольников, указывающих вниз, влево и вправо, см. в моей статье на Чистые отзывчивые треугольники CSS. Приведенный CSS предназначен для треугольника с отношением высоты основания, равным 2. Попытка изменить пропорции треугольника, не зная, как эти треугольники имитируют отзывчивость, может быть сложной.

Вы можете добиться того же, используя простой 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;
}