Как сверстать фигуру (ромб, прямоугольник)?

Question

[Persotr27]

Здравствуйте. В макете есть фигура, ромб в моём случае, она расположена как картинка. Каким образом можно ее сверстать? Экспортировать как изображение в svg?

Answer 1

[Никита Мелихов]

В гугл! Вот примеры различных фигур на CSS: https://css-tricks.com/the-shapes-of-css/

Как вариант - SVG. Можно вставлять в вёрстку напрямую.
Что-то типа такого:

<style>
  svg {
    width: 100px;
    height: 200px;
  }
  polygon { fill: red }
</style>
<svg viewBox="0 0 2 2" preserveAspectRatio="none">
  <polygon points="1 0, 2 1, 1 2, 0 1" />
</svg>

https://codepen.io/anon/pen/RdJrgp

Answer 2

[Максим]

https://codepen.io/topicstarter/pen/LaLBXX вот так можно

Answer 3

[tempick]

Делаете прямоугольник обычном див-ом, чтобы был ромб - поворачиваете на 45 градусов через transform:rotate

Answer 4

[jshikanova]

На этом сайте с помощью clip-path можно любую фигуру сделать

Comments

[Никита Мелихов]

IMHO, пока лучше использовать SVG, как более кроссбраузерное решение.