Как прописать ширину элемента в зависимости от разрешения экранa?

Question

[AnnaUniq]

Имеется родительский блок, в котором имеется дочерний элемент с двумя классами

<div class="parent">
    <div class="border bottom"></div>
</div>

для дочернего следующие стили

.bottom{
    position: absolute;
    bottom:-80px;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 80px 1200px 0 0;
    border-color: #c5f0ff transparent transparent transparent;
    z-index: 1;
}

это сделано для получения скошенных углов у родительского блока (предлагать skew и прочее не нужно, выбор пал на этот вариант по необходимости )

Далее на jq получаем ширину экрана (родительский блок имеет 100% ширину)
Но вот вставить полученный результат в ширину border почему-то не выходит, подскажите, что не так
Вот jquery

$(window).on('load resize', function() {
        var $width = $(window).width();
        
        $('.border').css('border-width':' 80px "$width" 0 0');
    });

Comments

[Сергей delphinpro]

$(window).width() возвращает просто число
Значит нужно писать так

$('.border').css('border-width',' 80px '+$width+'px 0 0');

[Сергей delphinpro]

ну и запятая там, а не двоеточие, если вы не хеш передаете, а два параметра

[AnnaUniq]

Сергей: Спасибо огоромное! Вы решили мою проблему!

Answer 1

[ThunderCat]

htmlbook.ru/blog/css-maket-stanovitsya-umnee-s-calc

Answer 2

[kulaeff]

У вас куча ошибок в строке

$('.border').css('border-width':' 80px "$width" 0 0');

Надо так:

$('.border').css('border-width': ' 80px ' + $width + 'px 0 0');