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

CSS преобразование квадрата в более тонкий ромб

Как создать ромб: rhombus(как показано красным цветом), преобразовав квадрат с помощью css? Двигаться должны только точки B и C. Первоначальный размер квадрата-25px на 25px.

Я пытаюсь достичь этого результата и позже поверну его на 45 градусов, чтобы он выглядел как алмаз. Я думаю, что это можно сделать с помощью transform:matrix();

P.S. Я хочу как можно больше стараться не использовать explorercanvas, так как я пытаюсь минимизировать теги скриптов в html.

5 ответов

from Tkinter import Tk, Canvas master = Tk() w = Canvas(master, width=250, height=200) w.pack() w.create_rectangle(0, 0, 100, 100, fill=blue, outline = ‘blue’) master.mainloop() Это создает один square/rectangle. как мне создать функцию, чтобы она создавала более одного квадрата?

Вот мой CSS. Может ли кто-нибудь сказать мне, что означает контур: тонкий пунктир \9? select:focus, textarea:focus, input:focus, .uneditable-input:focus < border-color: rgba(82, 168, 236, 0.8); outline: 0; outline: thin dotted \9; /* IE6-9 */ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0.

Измените значения перекоса, чтобы повлиять на то, насколько тощим становится ваш алмаз. Это вытеснит другие углы, и вам нужно будет масштабировать весь объект, если требуется сохранить определенные размеры.

Вот jsfiddle с описанным вами преобразованием.
И еще немного о преобразованиях CSS.

Я знаю, что вы уже приняли ответ , но вы можете сделать это без использования transform , что часто бывает сложно реализовать кросс-браузер (особенно в IE). Недостатком моей техники является то, что в игре есть еще несколько элементов.

Использование scaleX или scaleY может быть немного проще:

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

Ана Тюдор предлагает использовать skewX и scaleY для компенсации, чтобы сохранить размеры одинаковыми. Для получения более подробной информации о том, как работает skew , проверьте связанное видео

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

Похожие вопросы:

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

я работаю на небольшой проект Sinatra/тонкий, и я хочу, чтобы включить файл css. Все работает нормально, кроме этого. Вот мой проект tree: ├── essai.rb └── views ├── form.slim └── style.css А это.

Как я могу создать более тонкий UIToolBar в моем iOS-приложении? Стандартный размер-44px, и я хотел бы иметь его в 30 или 35px. Возможно ли это?

from Tkinter import Tk, Canvas master = Tk() w = Canvas(master, width=250, height=200) w.pack() w.create_rectangle(0, 0, 100, 100, fill=blue, outline = ‘blue’) master.mainloop() Это создает один.

Вот мой CSS. Может ли кто-нибудь сказать мне, что означает контур: тонкий пунктир \9? select:focus, textarea:focus, input:focus, .uneditable-input:focus < border-color: rgba(82, 168, 236, 0.8);.

Я создаю некоторое изображение с плоскостью, которая имеет перспективное преобразование. Мне нужно определить центр каждого белого ромба или сам ромб. Вот примеры: Как я понимаю, проблема может быть.

Я пытаюсь понять, как сделать анимацию в css+js квадрата, вращающегося внутри div, как на этой картинке. Мне интересно, возможно ли это вообще, из-за опрокидывания на каждую другую сторону в.

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

Можно ли создать ромб в форме View, используя react-native? Вот картинка для чего я хочу: Я попробовал это сделать с помощью стиля границы, но не смог реализовать.

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

Как сделать ромб border-ми css [закрыт]

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.

Закрыт 2 года назад .

Как сделать ромбик свойством border , по середине ромбика линию и чтобы при наведении на ромбик и на линию, ширина линии уменьшалась до 0.

Как это сделать, помогите?

Не знаю, насколько понятно это будет для вас. будут вопросы — задавайте в комментарии)

Как списку li вместо стандартного маркера сделать ромб?

Как списку li вместо стандартного маркера сделать ромб? Смотрел свойство list-style-type, но там квадраты и прозрачный круг, нужен ромб. Я так понимаю его нужно задать псевдоэлементом after? Но как тогда его можно сверстать

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками html css или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

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

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