2

Столкнулся с проблемой. Нужно сделать так, как показано на картинке.

alt text

HTML код:

<div id="rotate"></div>

CSS стили:

#rotate {
    width: 230px;
    height: 75px;
    -webkit-transform: rotate(10deg);
    -moz-transform: rotate(20deg);
    background-color:#000000;
    position:absolute;
    left: -195px;
    top: 82px;
}

В хроме все выглядит отлично. А вот в опере и мозиле - коряво (даже очень). Так вот как сделать так, чтобы это поддерживали все браузеры. И можно ли обойтись без position: absolute; иначе, когда я меняю размер окна, все слетает. (( Заранее сердечно благодарен!

1
  • Картинка не грузится.. Commented 11 июн. 2015 в 11:06

1 ответ 1

1

Хм, вовсе не кроссбраузерно получается - для IE на CSS'e вообще ни слова :), по мне так самый простой и кроссбраузерный способ сделать это - оставить картинкой и использовать тэг <map>.

Однако, если вам все-таки не нравиться забавляться с картинкой, вот ссылка на статью "Cross Browser CSS Transforms – even in IE" про трансформации на CSS.

3
  • Значит на бэкграунде изображения уже будут эти полоски, а затем с помощью map будут накладываться ссылки? Я правильно понял?)
    – Wars
    Commented 4 авг. 2011 в 17:58
  • Да, именно так)
    – GLAGOLA
    Commented 4 авг. 2011 в 18:29
  • спасибо) как попробую отпишусь)
    – Wars
    Commented 4 авг. 2011 в 18:32

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.