Как сделать растяжимый фон треугольник без картинок

[hike]

Здравствуйте!

Увидела в интернете множество рецептов как сделать элемент с нулевой шириной и высотой и широкими прозрачными границами, чтобы получился треугольник, например здесь https://css-tricks.com/examples/ShapesOfCSS/

Проблема в том, что такой треугольник не растягивается. Границе нельзя задать значение в процентах от ширины родителя.

Мне же нужно, чтобы Triangle Top Left тянулся как фоновый рисунок треугольника, только без рисунка, средствами css.

Как это сделать?

Edited January 9, 2018 by hike

[Switch74]

можно попробовать так https://jsfiddle.net/wn1f3p6k/

[hike]

К сожалению, не подойдет, так как родитель - это блок, а не весь браузер.

Видела, как делают трапецию двумя линейными градиентами.

Может быть, треугольник тоже можно сделать с помощью градиентов?

[Switch74]

а какая разница? блок у вас ведь относительно браузера меняет свои размеры или нет?

 

[Vlad_P]

Если, например, бутстрап и блок в .container - оно не относительно браузера. Я сам так и не нашел грамотного решения. Может не сильно и искал - проще картинку воткнуть. Может тут кто что подскажет

[Switch74]

если блок не меняет своих размеров относительно браузера, то зачем менять размеры треугольника?

[Vlad_P]

ну да, тоже верно. а в случае container-fluid менее 1200 использовать vw

[wwt]

background-image: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');

 

[hike]

  On 1/11/2018 at 6:08 PM, wwt said:

background-image: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');

можно подробнее: что вместо многоточия написать для прямоугольного треугольника?

  On 1/11/2018 at 2:33 PM, Vlad_P said:

ну да, тоже верно. а в случае container-fluid менее 1200 использовать vw

Expand  

мысль не уловила, да, у меня колонка в контейнере в бутстрап, а в колонке блок на всю ширину колонки, поскольку колонка изменяет ширину в зависимости от устройства, блок также изменяет ширину, то есть катет прямоугольного треугольника и его гипотенуза - переменные величины.

Expand  

 

[Vlad_P]

Я так понимаю, у вас макс. ширина сайта 1200, на экранах свыше этого ширина колонки постоянна. т.е. вы строите треугольник из бордеров, задавая им фикс. значения в пикселях. Для экранов меньшей ширины, если вы используете .container-fluid, ширина колонки будет напрямую зависеть от ширины экрана, а значит вы можете для изменяемых сторон использовать значения в единицах vw. Т.е. что-то вроде:

@media screen and (max-width: 1199px) {
    .ex::after {border-top: 95vw;}
}

Если я правильно понял вашу ситуацию

[vladmih]

Я треугольник делаю через трансформацию. SkewX, Y, делать блок обертку с оверфлов хидден, а внутри трансформированный блок. 

А размеры задавать через относительные единицы wv, wh или %

[wwt]

  On 1/11/2018 at 11:14 PM, hike said:

можно подробнее: что вместо многоточия написать для прямоугольного треугольника?

Expand  

Если я верно понял что вам надо https://jsfiddle.net/kvoL4zp9/