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

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

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

23
Возможно, я что-то пропустил, но разве это не градиентное изображение, примененное к телу тела? Если это так, вы можете использовать градиенты css3 ... Я не знаю, что означает «трапеции».
добавлено автор chovy, источник
Вы имеете в виду панель навигации? Это изображение: google.com/mobile/ изображения/mgc3/MGC-тело-панель-BG-banner.png
добавлено автор Blender, источник
В США мы говорим «трапеция» для четырехугольника с одной парой параллельных сторон и «трапеция» для четырехугольника без параллельных сторон. За пределами США «трапеция» = US :: «трапеция», а US :: «трапеция» просто «нерегулярна». Зная, половина битвы ~
добавлено автор Andrew Kozak, источник

3 ответы

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

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

#trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 100px;
}
<div id="trapezoid"></div>
</div> </div>

Это здорово сделать все эти формы, взгляните на более приятные фигуры:

http://css-tricks.com/examples/ShapesOfCSS/

РЕДАКТИРОВАТЬ: Этот CSS применяется к элементу DIV

38
добавлено
Большое спасибо! Я видел этот сайт раньше, но я забыл об этом вчера вечером. Я решил проблему. Действительно спасибо!
добавлено автор CashLee李秉骏, источник
@Kishan: ознакомьтесь с этим ответом на отзывчивую трапецию stackoverflow.com/a/26628030/933633
добавлено автор TheCarver, источник
сэр, я хочу отзывчивую форму ловушки. можешь рассказать мне что-нибудь об этом?
добавлено автор Kishan, источник
пожалуйста, это один из моих любимых сайтов, вы можете найти там много полезной информации.
добавлено автор ElHacker, источник

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

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

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

.trapezoid {
  width: 200px;
  height: 200px;
  background: red;
  transform: perspective(10px) rotateX(1deg);
  margin: 50px;
}
<div class="trapezoid"></div>
</div> </div>

SVG

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

 
 
</div> </div>

холст

<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

var c = document.getElementById("myхолст");
var ctx = c.getContext("2d");
ctx.moveTo(30, 0);
ctx.lineTo(170, 0);
ctx.lineTo(200, 200);
ctx.lineTo(0, 200);
ctx.fillStyle = "#FF0000";
ctx.fill();
<�������������������������
���</div>
26
добавлено

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

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

1
добавлено
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda

CSS — русскоговорящее сообщество
CSS — русскоговорящее сообщество
1 502 участник(ов)

Сообщество любителей CSS Возникли проблемы с CSS? – пиши сюда, обсудим и предложим самое лучшее решение Работа: @css_ru_jobs Правила: https://teletype.in/@css_ru/r1EWtQ2w7 Приходите в наши чаты @javascript_ru и @frontend_ru Флуд: @css_flood

Чат — Типичный Верстальщик
Чат — Типичный Верстальщик
1 080 участник(ов)

Основной канал: @tpverstak Обратная связь: @annblok Все ссылки на соц.сети проекта: http://taplink.cc/tpverstak ПРАВИЛА ЧАТА — https://teletype.in/@annblok/BygPgC3E7

Веб-Технологи: UI/UX, Вёрстка, Фронтенд
Веб-Технологи: UI/UX, Вёрстка, Фронтенд
167 участник(ов)

Всё про веб-дизайн и вёрстку. А также: HTML, CSS, флекс и бутстрапы, шаблонизаторы, препроцессоры, методологии, аглифаеры, улучшаторы и обфускаторы. Обсуждаем темы юзабилити, устраиваем А/В тесты лендингов, и проводим аудит.

DTP :: @DTPublish
DTP :: @DTPublish
147 участник(ов)

Обсуждаемые темы: полиграфия, препресс, верстка, дизайн, иллюстрации, скрипты, плагины. Канал - @DTPublishing

css_jobs
css_jobs
26 участник(ов)

Чат для вопросов по css и html: @css_ru Флуд: @css_flood Канал с вакансиями и резюме: @css_jobs_feed

css_флуд
css_флуд
10 участник(ов)