Як намалювати трапецію/трапецію з css3?

Перейшовши на сторінку http://m.google.com , використовуючи Mobile Safari, ви побачите гарний бар у верхній частині сторінки.

Я хотів би намалювати деякі трапеції (США: трапеції), але я не знаю, як це зробити. Чи слід використовувати css3 3d transform? Якщо у вас є хороший спосіб досягти цього, будь ласка, скажіть мені.

23
Можливо, я щось відсутній, але хіба це не просто градієнтне зображення, яке застосовується до тега тіла? Якщо так, ви можете використовувати градієнти css3 ... Я не знаю, що означає "трапеція".
додано Автор chovy, джерело
Ви маєте на увазі панель навігації? Це зображення: google.com/mobile/ images/mgc3/mgc-body-toolbar-bg-banner.png
додано Автор Blender, джерело
У США ми говоримо "трапеція" для чотирикутника з однією парою паралельних сторін, а "трапеція" для чотирикутника без паралельних сторін. За межами США «трапеція» = «трапеція», а «трапеція» просто «нерегулярна». Знання - це половина битви ~
додано Автор 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/

EDIT: Цей CSS застосовується до елемента DIV

38
додано
Велике спасибі! Я бачив цей сайт раніше, але я забув його вчора ввечері! Я вирішив проблему.Дійсно спасибі!
додано Автор CashLee李秉骏, джерело
@Kishan: Ознайомтеся з цією відповіддю на відповідь на трапеційну відповідь
додано Автор TheCarver, джерело
Сер, я хочу відповідати на форму trapziod. Чи можете ви сказати мені що-небудь про це?
додано Автор 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, з іншого боку, означатиме, що вам доведеться мати форму поділів у фоновому режимі, а потім накласти на них фактичний текст в інший елемент, щоб текст також не був перекошений. Знову ж таки, підтримка браузера не гарантується.

1
додано