Как нарисовать трапецию / трапецию с помощью css3? - PullRequest
Новая
       10

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

27 голосов
/ 27 октября 2011

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

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

Ответы [ 3 ]

46 голосов
/ 28 октября 2011

Вы можете использовать некоторые 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>

Действительно круто делать все эти фигуры, посмотрите на более красивые фигуры по адресу:

http://css -tricks.com / примеры / ShapesOfCSS /

EDIT: Этот CSS применяется к элементу DIV

41 голосов
/ 26 января 2016

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

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

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

SVG 

<svg viewBox="0 0 20 20" width="20%">
  <path d="M3,0 L17,0 L20,20 L0,20z" fill="red" />
</svg>

Canvas 

var c = document.getElementById("myCanvas");
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();
<canvas id="myCanvas" width="200" height="200"></canvas>
1 голос
/ 27 октября 2011

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

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

...