Срез изображения с помощью javascript / css

Question

Я хотел бы вырезать изображения по диагонали с помощью javascript / css, но я не знаю, смогу ли я добиться этого с помощью кода, отличного от HTML5, и должен ли быть HTML5, если используется кросс-браузер.

Вот мой дизайн

http://www.behance.net/gallery/Redesign-GlobalPerformancecat/680358

Спасибо за вашу помощь

X

Хорошо, я объясню лучше,

URL следующего веб-сайта не для рекламных целей

http://www.globalperformance.cat/

Я пытаюсь портировать с флэш на html раздел «Nosotros> Nuestro equipo», я знаюэто сложно, я могу сделать это проще, если нужно, но я действительно хочу оставить вспышку, когда это возможно

Answer 1

Ответ на ваш вопрос немного сложен, но я постараюсь объяснить его.

Для кросс-браузерной совместимости вам необходимо создать изображение, которое будет на 50% прозрачным и на 50% заполненным диагональным градиентом, который вы используете в качестве фона. Следуйте за этим снимком экрана Я только что создал это для вас, это изображение говорит само за себя: http://screencast.com/t/LU5E1XPdhoJ

Вам также необходимо обновить HTML-код, например,

<ul>
  <li> make this li tag position relative
    <div>
     place that half transparent image in this div and make this div position absolute and z-index 10 or higher
    </div>
     <img src="image.jpg" /> put actual image in this img tag
  </li>
</ul>