• 0
hike

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

Вопрос

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

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

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

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

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

Изменено пользователем hike

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

11 ответов на этот вопрос

Рекомендованные сообщения

  • 0

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
background-image: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
4 часа назад, wwt сказал:

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

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

8 часов назад, Vlad_P сказал:

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

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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах
  • 0
В 12.01.2018 в 02:14, hike сказал:

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

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

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на других сайтах

Создайте аккаунт или войдите в него для комментирования

Вы должны быть пользователем, чтобы оставить комментарий

Создать аккаунт

Зарегистрируйтесь для получения аккаунта. Это просто!

Зарегистрировать аккаунт

Войти

Уже зарегистрированы? Войдите здесь.

Войти сейчас