Как сделать ромб css
Перейти к содержимому

Как сделать ромб css

  • автор:

Как сделать ромб на чистом css?

введите сюда описание изображения

Можете подсказать как сделать бордерами ромб? Пробовал использовать как SVG, но такой вариант не подходит, т.к есть проблемы с адаптивом.

Отслеживать

задан 17 мар 2022 в 10:08

3 2 2 бронзовых знака

17 мар 2022 в 10:11

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

*, *::before, *::after < box-sizing: border-box; >body < margin: 0; >.block < --border: 2px solid black; --size: 70px; width: var(--size); height: var(--size); margin: calc(var(--size) / 4); margin-top: calc(var(--size) / 1.5); transform: scaleY(1.5); >.block::before

Отслеживать

ответ дан 17 мар 2022 в 10:27

Михаил Камахин Михаил Камахин

8,694 2 2 золотых знака 18 18 серебряных знаков 57 57 бронзовых знаков

Фигуры на CSS

Язык стилей CSS значительно упрощает создание геометрических фигур. Не нужно пользоваться фоторедакторами или задавать сложную разметку с помощью HTML. Достаточно прописать всего лишь один элемент и сделать из него сложную фигуру с помощью псевдоэлементов, рамок и теней.
Эта возможность появилась недавно, с внедрением стандарта CSS3. Причем для этого достаточно двух свойств: transform и border-radius.

Круг

Создать окружность очень просто. Для этого создается элемент div. Предположим, его id – circle.

Чтобы сделать из него круг, необходимо задать желаемую ширину и высоту, а потом выставить значение border-radius на половину от width и height. А с помощью свойства background задается цвет. 
Также может потребоваться добавить вендорные префиксы для поддержки старых версий браузеров.

#circle

Квадрат

Для создания квадрата необходимо создать див с желаемым идентификатором. В нашем примере это будет square. После этого с помощью CSS задается фон, а ширина и высота делаются равными друг другу.

#square

Прямоугольник

Прямоугольник делается так же, как квадрат, только ширина и высота отличается друг от друга.

#rectangle

Овал

Овал делается так же, как прямоугольник, только добавляется свойство border-radius, размер которого составляет половину от ширины или высоты в зависимости от направленности фигуры.

#oval < width: 200px; height: 100px; background: #e9337c; -webkit-border-radius: 100px / 50px; -moz-border-radius: 100px / 50px; border-radius: 100px / 50px; >

Треугольник

Для создания треугольника нужно прописать, див, границей которой будем манипулировать с помощью CSS. Достаточно будет прописать длину каждой из сторон треугольника и задать цвет заливки.

#triangle

Можно развернуть треугольник в обратную сторону.

Для этого заменяем свойство border-bottom на border-top.

#triangle_down

Можно направить треугольник влево и вправо. Для этого необходимо сделать противоположную границу больше, чем две другие стороны. Например, так.

#triangle_left

Ромб

Создать ромб немного сложнее, чем треугольник, квадрат или круг. Для этого надо воспользоваться свойством transform и разместить два треугольника рядом.

#diamond < width: 120px; height: 120px; background: #1eff00; /* Rotate */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* Rotate Origin */ -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; margin: 60px 0 10px 310px; >

Трапеция

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

#trapezium

Параллелограмм

Чтобы создать параллелограмм, необходимо сделать обычный прямоугольник, после чего к нему применить свойство transform со значением skew.

#parallelogram

Звезда

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

#star < width: 0; height: 0; margin: 50px 0; color: #fc2e5a; position: relative; display: block; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); >#star:before < height: 0; width: 0; position: absolute; display: block; top: -45px; left: -65px; border-bottom: 80px solid #fc2e5a; border-left: 30px solid transparent; border-right: 30px solid transparent; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); >#star:after

Пятиугольник

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

#pentagon < width: 54px; position: relative; border-width: 50px 18px 0; border-style: solid; border-color: #277bab transparent; >#pentagon:before

Нестандартные фигуры

В принципе, разные фигуры создаются с помощью комбинации указанных выше. Так можно создать почти любую нестандартную фигуру.
Например, сердце создается значительно сложнее.

#heart < position: relative; >#heart:before,#heart:after < content: ""; width: 70px; height: 115px; position: absolute; background: red; left: 70px; top: 0; -webkit-border-radius: 50px 50px 0 0; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; >#heart:after

Здесь применяется свойство transform-origin, позволяющее задать точку, относительно которой и будет трансформироваться элемент.
С помощью комбинации треугольника и прямоугольника можно сделать бабл для комментария.

#comment_bubble < width: 140px; height: 100px; background: #088cb7; position: relative; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; >#comment_bubble:before

Генератор фигур CSS

Многие новички интересуются, есть ли генератор фигур CSS? Близко к этому приложение для Chrome CSS – Shack. Но на практике использовать таблицы стилей не рекомендуется для рисования фигур. Для этого есть SVG.

Создание различных геометрических фигур при помощи CSS

Одной из интереснейших функций CSS3 является то, что CSS3 позволяет уменьшить использование изображений в веб-дизайне и создавать различные геометричекие фигуры при помощи CSS. Простейшие формы, которые раньше рисовали в Photoshop или Illustrator сейчас можно сделать при помощи CSS3.

Итак, давайте попробуем создать простой набор наиболее распространенных форм, которые можно сделать с помощью CSS3.

Круг

Круг при помощи CSS

HTML

Чтобы создать круг в CSS, нам нужен всего лишь один DIV. В нашем примере мы еще указали для него ID, чтобы определить для него стили.

CSS

CSS очень простой, указываем ширину и высоту, а затем задаем ему border-radius равный половине ширины и высоты.

#circle

Квадрат

Квадрат при помощи CSS

HTML

Чтобы создать квадрат в CSS, нам так же, как и для круга, нужен один DIV с идентификатором.

CSS

CSS в данном случае еще проще, просто указываем равную ширину и высоту.

#square

Прямоугольник

Прямоугольник при помощи CSS

HTML

Чтобы создать прямоугольную форму CSS, всё делаем почти также как при создании квадрата. Это самые простые фигуры и ни у кого не должно возникнуть сложностей.

CSS

В CSS указываем ширину больше высоты.

#rectangle

Овал

Овал при помощи CSS

HTML

Чтобы создать овал в CSS, создайте DIV с идентификатором, например, oval.

CSS

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

#oval < width: 200px; height: 100px; background: #e9337c; -webkit-border-radius: 100px / 50px; -moz-border-radius: 100px / 50px; border-radius: 100px / 50px; >

Треугольник

Треугольник при помощи CSS

HTML

Для того чтобы создать треугольник в CSS, опять достаточно одного DIV-а.

CSS

Чтобы создать треугольник будем изменять ширину границы блока. Изменение ширины границы позволит Вам создавать различные углы наклона.

#triangle

Треугольник острием вниз

Треугольник (острием вниз) при помощи CSS

HTML

Чтобы создать форму перевернутого треугольника с помощью CSS, создать опять DIV с идентификатором triangle_down.

CSS

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

#triangle_down

Треугольник острием лево

Треугольник (острием влево) при помощи CSS

HTML

Чтобы создать форму треугольника, которая обращена влево, создадим DIV с идентификатором triangle_left.

CSS

Для создания треугольника, который “смотрит” влево, определим границы с правой стороны, сверху и снизу.

#triangle_left

Треугольник острием вправо

Треугольник (острием вправо) при помощи CSS

HTML

Код такой же, как и для предыдущих примеров, только со своим идентификатором.

CSS

Теперь определим границы с левой стороны, сверху и снизу.

#triangle_right

Ромб

Ромб при помощи CSS

HTML

Всё тот же простой HTML-код.

CSS

Создать ромб можно различными способами. Использование свойства transform с определенным значением rotate, позволит отобразить два треугольника рядом друг с другом.

#diamond < width: 120px; height: 120px; background: #1eff00; /* Rotate */ -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); /* Rotate Origin */ -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; margin: 60px 0 10px 310px; >

Трапеция

Трапеция при помощи CSS

HTML

Для того чтобы создать форму трапеции используя CSS, снова создайте DIV с идентификатором.

CSS

Трапеция создается похожим образом, как и треугольних.

#trapezium

Параллелограмм

Параллелограмм при помощи CSS

HTML

Опять создадим пустой DIV.

CSS

Чтобы создать форму параллелограмма, нам необходимо настроить значение skew для свойства transform, чтобы повернуть элемент на 30 градусов.

#parallelogram

Звезда

Звезда при помощи CSS

HTML

Для того чтобы создать форму звезды с помощью CSS понадобится также один DIV.

CSS

Создание звездочки – это также манипуляция с границами блока и с использованием значения rotate свойства transform. См. код ниже.

#star < width: 0; height: 0; margin: 50px 0; color: #fc2e5a; position: relative; display: block; border-right: 100px solid transparent; border-bottom: 70px solid #fc2e5a; border-left: 100px solid transparent; -moz-transform: rotate(35deg); -webkit-transform: rotate(35deg); -ms-transform: rotate(35deg); -o-transform: rotate(35deg); >#star:before < height: 0; width: 0; position: absolute; display: block; top: -45px; left: -65px; border-bottom: 80px solid #fc2e5a; border-left: 30px solid transparent; border-right: 30px solid transparent; content: ''; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg); -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); >#star:after

Шестиугольная звезда

HTML

Разметка для шестиугольной звезды ничем не отличается от предыдущих примеров, только укажем свой идентификатор.

CSS

В отличие от обычной звезды с пятью углами, мы создадм два набора форм, а затем объединим их в одну.

#star_six_points < width: 0; height: 0; display: block; position: absolute; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid #de34f7; margin: 10px auto; >#star_six_points:after

Пятиугольник

HTML

HTML-код всё тот же.

CSS

Пятиугольник будем состоять у нас из двух элементов. Сначала создадим форму трапеции, а затем добавим форму треугольника на вершину.

#pentagon < width: 54px; position: relative; border-width: 50px 18px 0; border-style: solid; border-color: #277bab transparent; >#pentagon:before

Шестиугольник

HTML

Создаем еще один DIV с идентификатором.

CSS

Существуют различные способы создания шестиугольника. Один из способов практически идентичен созданию пятиугольника. Сначала создайте прямоугольную форму, а затем добавьте два треугольника сверху и снизу.

#hexagon < width: 100px; height: 55px; background: #fc5e5e; position: relative; margin: 10px auto; >#hexagon:before < content: ""; width: 0; height: 0; position: absolute; top: -25px; left: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 25px solid #fc5e5e; >#hexagon:after

Восьмиугольник

HTML

Создание восьмиугольника потребует также одного DIV-а.

CSS

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

#octagon < width: 100px; height: 100px; background: #ac60ec; position: relative; >#octagon:before < content: ""; width: 42px; height: 0; position: absolute; top: 0; left: 0; border-bottom: 29px solid #ac60ec; border-left: 29px solid #f4f4f4; border-right: 29px solid #f4f4f4; >#octagon:after

Сердце

HTML

Для создания формы в виде сердца создадим DIV.

CSS

Форму сердца сделать не легко, но это может быть реализовано путем вращения элементов под разными углами и изменения свойства transform-origin для того, чтобы изменить расположение трансформированных элементов.

#heart < position: relative; >#heart:before,#heart:after < content: ""; width: 70px; height: 115px; position: absolute; background: red; left: 70px; top: 0; -webkit-border-radius: 50px 50px 0 0; -moz-border-radius: 50px 50px 0 0; border-radius: 50px 50px 0 0; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; >#heart:after

Яйцо

Яйцо при помощи CSS

HTML

Для того, чтобы создать фигуру в виде яйца нам также понадобиться один DIV.

CSS

Яйцевидная форма практически совпадает с овальной формой, за исключением того, что высота немного выше, чем ширина и радиус необходимо тщательно подобрать, чтобы получить хороший результат.

Символ бесконечности

Символ бесконечности при помощи CSS

HTML

Создаем снова пустой DIV.

CSS

Форма бесконечности может быть создана путем тщательного манипулирования размерами границы и установки углов круга.

#infinity < width: 220px; height: 100px; position: relative; >#infinity:before,#infinity:after < content: ""; width: 60px; height: 60px; position: absolute; top: 0; left: 0; border: 20px solid #06c999; -moz-border-radius: 50px 50px 0; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); >#infinity:after

Облачко с комментарием

Облачко с комментарием при помощи CSS

HTML

Создаем DIV с ID comment_bubble.

CSS

Облако с комментарием может быть создано путем создания прямоугольника с закругленными углами, и затем добавления треугольной формы с левой стороны.

#comment_bubble < width: 140px; height: 100px; background: #088cb7; position: relative; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; >#comment_bubble:before

Pacman

Pacman при помощи CSS

HTML

Чтобы создать форму в виде Пакмана из известной игры, создадим также один DIV.

CSS

Для создания Pacman-а будем манипулировать границей и радиусом, чтобы создать пустое пространство на левой стороне окружности.

#pacman

Демо

  • ← Отключение автоформатирование в wordpress
  • Селекторы CSS – полное руководство с примерами →

Как сделать ромб css

Регистрация: 21.06.2016

Сообщений: 6

Как сделать ромбик?

У меня в секции 3 элемента col-md-4. Как видно на картинке есть ромбик. Я взял прямоугольник и просто повернул его, но он выходит за пределы item`а. Так же быть не должно. Я бы мог сделать с помощью clip-path, но оно не кросбраузерно да и нужно у меть с помощью CSS делать такие штуки.

У меня проблемы с фигурами которые нужно делать средствами CSS. Как мне исправить эту ситуацию?

div col-sm-4"> 

.features background-color: $white min-height: 870px padding: 50px 0 40px text-align: center &_training margin-top: 46px &_item margin: 35px 0 30px &_diamond width: 74px height: 74px background-color: $red margin: 0 auto 30px transform: rotate(45deg) &_icon &_workout font-size: 18px font-weight: 700 text-transform: uppercase color: $dark-gray margin: 0 &_text font-size: 13px font-weight: 400 color: $gray-light margin: 29px 0 0

Изображения

d73bcb8f8a3f41a8be883b0bef7c9663.jpg (61.2 Кб, 120 просмотров)
TopperHarley
Посмотреть профиль
Найти ещё сообщения от TopperHarley

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *