Как сверстать фигуру (ромб, прямоугольник)?
В гугл! Вот примеры различных фигур на 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
https://codepen.io/topicstarter/pen/LaLBXX вот так можно