Трапеция | CSS

Посмотрим реализацию благодаря свойству transform. Меняя угол зрения perspective и угол наклона rotateY, получаем такую вот равнобедренную трапецию. Содержимое в ней, как видите, также наклоняется.

Если изменить rotateX на rotateY, параллельные стороны (основания трапеции) будут вертикальны. Фактически rotate кружит элемент. Поэтому, чтобы найти нужное положение, обязательно попробуйте поменять значения в теге style в пунктирном поле. Оно динамически изменяемо.

P.S. мне не ведомо почему это так криво отображается в Хроме. Почему даже IE справляется с задачей на ура.

в f t
наверх ↑

8 комментариев:

Анонимный
А где картиночки-примеры? С ними было бы интереснее :) Однако, спасибо в любом случае!)
NMitra
Какие картиночки-примеры?
Анонимный
Наталья, огромное спасибо за эту информацию! Несколько раз искал подобное, но тщетно, а сейчас очень кстати, пригодится для оформления шапки блога.
NMitra
Рассчитывайте пространство так, чтобы уместился весь текст без искажения, потому что поддержка браузерами ограничена. Опера вообще не поддерживает perspective, В Хроме какая-то несуразица. Можно опустить -webkit- и показывать элемент только в IE и Мозиле. Это временная мера, совсем недавно и градиенты браузеры создавали по своему. По хорошему нужно все значения transform посмотреть. Например, rotate() - это не тоже самое что rotateX() и rotateY()

Я тоже одно время искала такое решение, но не нашла. Вообще не могла понять откуда вырисовывается трапеция, получался только параллелограмм.
Анонимный
А если для каждого браузера указать, тоже не получается? Хотя, кому я задаю этот вопрос, Вы наверняка протестили эти варианты. Спасибо, Наташа!
NMitra
Опера не поддерживает perspective ни с префиксом, ни без. Её как браузер забросили. Она - это Хром, да и то, не полностью перешедший. Да, я полюбопытствовала на результат )
Космо Мизраил Горыныч
Если надо просто нарисовать однородную трапецию без содержимого внутри неё, можно воспользоваться прозрачными границами:
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
случайно найдено на css-tricks.com. Я таким же способом пилю стрелочки и всякие хвостики для менюшек, хлебных крошек, облачек и прочего.
NMitra
Верно и поддержка лучше. Только не совсем понятно что с такой трапецией делать. Интереснее будет:

#trapezoid {
border-corner-shape: bevel;
border-radius: 30px 30px 0px 0px;
}

К сожалению, border-corner-shape ещё не поддерживается.