Доброе время суток, уважаемые форумчане! Ковыряю различные CSS хитрости, в частности, ленточки. Те, кто в теме, знают, что левый край ленточки - это псевдоэлемент :before c нулевой высотой и шириной, и широкими border, при этом левый border - прозрачный. Захотелось наложить на ленточку градиент. Задумал сделать так, чтобы градиент был вертикальный, трёхцветный, при этом верхний и нижний цвета - одинаковые. Потом на верхний и нижний border-ы before можно будет наложить двухцветные вертикальные градиенты, а на правый border - такой же градиент, как и на основной блок. И настроить всё это таким образом, чтобы они сливались с основным блоком. На основной блок градиент спокойно накладывается свойством backround-image (или просто bacground). Наложить его на border-ы before тоже можно свойством border-image. Но вот проблема: border-image нельзя прописывать отдельно для каждой стороны! У кого есть читы по этой теме? P. S. Из положения можно выйти, прописав radial-gradient. Получается, вполне себе, не принужденно, но всё же...
Это вот тот самый момент, когда лучшее - враг хорошего, и проще использовать спрайты готовые, натягивая их на бэкграунд. Лайвхак в том, что для заливки градиентом нужно использовать градиентную полосу толщиной в 1 пиксель. При горизонтальном репите или скейле она будет давать идеальный градиент на всей протяженности элемента. Адаптивность не ломается. Ну а сам уголок можно сделать полностью автономным спрайтом.