Просвечивает край нижнего элемента

Страница — smartprogress.ru/goal/2149/

image

Вверху страницы есть прогресс бар.
Его конструкция: div с фоном в виде градиента, внутри div с коричневым фоном является шторкой, закрывающий фон градиента. При изменении ширины шторки, меняется величина прогресса (видимая область градиентной полоски).
Сделано это так, потому что необходимо, что бы градиент перетекал по всей длине прогресс бара, даже по не видимой, т.е. что бы цвет правого края прогресс бара менялся в зависимости от величины прогресса.
Проблема в том, что по краям прогресс бара градиентная полоса просвечивает над коричневой шторкой (показано на скриншоте сверху). Уже несколько дней бьюсь с проблемой, может кто нибудь подсказать возможно ли добиться желаемого эффекта без данного глюка, и если возможно то как?

Прототип: jsfiddle.net/Rjfq7/3/
  • Вопрос задан
  • 3099 просмотров
Пригласить эксперта
Ответы на вопрос 2
@Makito
Вот оно — веяние современных технологий…
Наверное вы не застали времен, когда такие вещи делались запросто на картинках. И не тратили бы сейчас на такое несколько дней.
По-старинке не тру такое сделать?
Ответ написан
maxttor
@maxttor Автор вопроса
Да не я, это все злые дизайнеры :) А в чем ужас то? :) Вроде симпатично :)
Каким образом это сделать на картинках, если от ширины прогресс бара зависит рисунок градиента? т.е. для каждой ширины рисунок (длина перетекания) будет своя — уникальная.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы