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

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

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

Ответ 1

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

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

<div id="trapezoid"></div>

Ответ 2

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

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

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

<div class="trapezoid"></div>

Ответ 3

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

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