Как нарисовать трапецию / трапецию с css3?

Когда вы перейдете на страницу http://m.google.com с помощью Mobile Safari, вы увидите прекрасную панель в верхней части страницы.

Я хочу нарисовать некоторые трапеции (США: трапеции), но я не знаю, как это сделать. Должен ли я использовать 3d-преобразование css3? Если у вас есть хороший метод для его достижения, пожалуйста, скажите мне.

Вы можете использовать некоторые CSS следующим образом:

#trapezoid { border-bottom: 100px solid red; border-left: 50px solid transparent; border-right: 50px solid transparent; height: 0; width: 100px; } 
 

Поскольку это уже довольно давно, я считаю, что он может использовать некоторые новые обновленные ответы с некоторыми новыми технологиями.

Перспектива преобразования CSS

 .trapezoid { width: 200px; height: 200px; background: red; transform: perspective(10px) rotateX(1deg); margin: 50px; } 
 

У вас есть несколько вариантов. Вы можете просто использовать изображение, нарисовать что-нибудь с svg или исказить регулярный div с помощью css-преобразований. Изображение будет проще всего и будет работать во всех браузерах. Рисование в svg немного сложнее и не гарантируется, что он работает по всем направлениям.

Использование css-преобразований, с другой стороны, означало бы, что вы должны иметь свои div формы в фоновом режиме, а затем накладывать фактический текст поверх них в другом элементе на то, что текст также не перекошен. Опять же, поддержка браузера не гарантируется.

  • MVC Тип данных Валютная триггерная цифровая клавиатура
  • Полное фоновое изображение с эффектом затухания
  • Кнопка Аккордеон Bootstrap для переключения "data-parent" не работает
  • Как настроить время отображения уведомлений рабочего стола в Google Chrome?
  • Как использовать тире в атрибутах data-* HTML-5 в ASP.NET MVC
  • CSS3 Transform Skew One Side
  • Как отключить содержимое HTML5 в популярных браузерах, таких как Firefox и Chrome?
  • Показывать источник видео Youtube в теге HTML5?
  • Встроенное видео HTML5 на iPhone против iPad / браузера
  • HTML5: тип ввода номера, который принимает только целые числа?
  • Как я могу использовать элемент canvas HTML5 в IE?
  • Interesting Posts
    Давайте будем гением компьютера.