Задать вопрос
@Persotr27
верстка

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

Здравствуйте. В макете есть фигура, ромб в моём случае, она расположена как картинка. Каким образом можно ее сверстать? Экспортировать как изображение в svg?
  • Вопрос задан
  • 1446 просмотров
Комментировать
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 4
VeroLom
@VeroLom
Веб-разработчик, фрилансер, UMI.CMS
В гугл! Вот примеры различных фигур на 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
Ответ написан
Комментировать
Комментировать
LenovoId
@LenovoId
svg, css,js
https://codepen.io/topicstarter/pen/LaLBXX вот так можно
Ответ написан
Комментировать
Комментировать
@tempick
Делаете прямоугольник обычном див-ом, чтобы был ромб - поворачиваете на 45 градусов через transform:rotate
Ответ написан
Комментировать
Комментировать
jshikanova
@jshikanova
На этом сайте с помощью clip-path можно любую фигуру сделать
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Frontend программист-разработчик
Максавит • Нижний Новгород
До 200 000 ₽
PHP-программист (SEO-правки)
Demis Group
от 50 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
HFT (high frequency trading) разработка торгового бота c#
24 апр. 2024, в 22:30
200000 руб./за проект
Сверстать лейдинг на Joomla
24 апр. 2024, в 22:11
2000 руб./за проект
SEO сайта услуг
24 апр. 2024, в 21:49
10000 руб./за проект
Ещё заказы