0

Доброго времени суток.

Есть прямоугольник с контентом и прямоугольный треугольник через :after для создания прямоугольной трапеции:

<div class = "content">Какой-то текст</div>

.content{
    width: 100px;
    height: 444px;
    position:relative;
    background-color:#FFFFFF;
}

.content:after{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: -70px;
    border-top: 444px solid #FFFFFF;
    border-right: 70px solid transparent;
}

Получается прямоугольная трапеция 170x444, но она привязана к конкретной высоте. Вопрос: как растянуть треугольник(.content:after) по высоте блока .content ?

1 ответ 1

0

Если я правильно понял Вы хотите чтобы ваш :after растягивался автоматом по высоте всего блока? css врятли так сможет! JS в помощь

$(document).ready(function() {  var str = $('.content').height();  $('<style>.content:after{border-top:' + str + 'px solid #000;}</style>').appendTo('head');});

jsfiddle.net

4
  • Я просто хочу растягиваемую по высоте прямоугольную трапецию :) javascript не вариант. Возможно есть другие способы сделать такую фигуру помимо border? 7 ноя 2018 в 11:28
  • Через transform возможно! jsfiddle.net
    – GENESIS
    7 ноя 2018 в 11:34
  • но боюсь это тоже не то, можно сделать подругому, создать фигуру svg и тянуть ее исходя из блока, если JS не хотите
    – GENESIS
    7 ноя 2018 в 11:41
  • Сделал через transform :) Теперь уголок тянется, спасибо. Трапеция у меня и так состояла из двух частей. Нужно было просто растянуть правильно =) svg, js слишком много чести для одной трапеции ^_^ 7 ноя 2018 в 11:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.