Посмотрим реализацию благодаря свойству transform. Меняя угол зрения perspective и угол наклона rotateY, получаем такую вот равнобедренную трапецию. Содержимое в ней, как видите, также наклоняется.
Если изменить rotateX на rotateY, параллельные стороны (основания трапеции) будут вертикальны. Фактически rotate кружит элемент. Поэтому, чтобы найти нужное положение, обязательно попробуйте поменять значения в теге style в пунктирном поле. Оно динамически изменяемо.
P.S. мне не ведомо почему это так криво отображается в Хроме. Почему даже IE справляется с задачей на ура.
8 комментариев:
Я тоже одно время искала такое решение, но не нашла. Вообще не могла понять откуда вырисовывается трапеция, получался только параллелограмм.
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
случайно найдено на css-tricks.com. Я таким же способом пилю стрелочки и всякие хвостики для менюшек, хлебных крошек, облачек и прочего.
#trapezoid {
border-corner-shape: bevel;
border-radius: 30px 30px 0px 0px;
}
К сожалению, border-corner-shape ещё не поддерживается.