Вопросы с тегом 'css-shapes'

CSS-Shapes создаются с помощью Cascade Styling Sheets, чтобы сделать HTML-элементы фигурами и изображениями. Самые основные формы включают треугольники, квадраты и круги, но могут быть сделаны в более продвинутые формы, такие как сердца, восьмиугольники и звезды.
18

Как работают треугольники CSS?

В , и я особенно озадачен треугольником: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } <div id="triangle-up"></div> Ка...
16 авг. '11 в 3:54
3

Создание радиального меню в CSS

Как создать меню, которое выглядит так... Ссылка на PSD Я не хочу использовать изображения PSD. Я бы предпочел использовать значки из какого-то пакета, например FontAwesome и создать фонов /css, сгенерированных в CSS. Версия меню, использующег...
30 окт. '12 в 4:57
3

Как я могу анимировать рисунок текста на веб-странице?

Я хочу иметь веб-страницу с одним ключевым словом. Я хочу, чтобы это слово было нарисовано с помощью анимации, так что страница "пишет" слово так же, как и мы, т.е. начинается с одной точки и рисует линии и кривые с течением времени, так что конечны...
28 апр. '15 в 5:38
12

Как создать слезу в HTML?

Как создать такую ​​форму для отображения на веб-странице? Я не хочу использовать изображения, так как они будут размыты при масштабировании Я пробовал с CSS: .tear { display: inline-block; transform: rotate(-30deg); border: 5px soli...
08 июн. '15 в 14:01
5

Как этот CSS создает круг?

Это CSS: div { width: 0; height: 0; border: 180px solid red; border-radius: 180px; } Как это сделать круг ниже? Предположим, если ширина прямоугольника равна 180 пикселям, а высота - 180 пикселей, то она будет выглядеть так: ...
24 апр. '13 в 10:08
17

Как использовать CSS для округления круга?

Я хотел бы окружить число по кругу, как на этом изображении: Возможно ли это и как оно достигается?
01 февр. '11 в 10:07
13

Простой способ создания круга div, чем использование изображения?

Мне интересно, есть ли более простой способ создания круговых div, чем то, что я делаю сейчас. В настоящее время я просто делаю изображение для каждого разного размера, но это раздражает сделать это. Есть ли в любом случае использование CSS для соз...
30 янв. '11 в 2:19
16

css: как рисовать круг с текстом в середине?

Я нашел этот пример в stackoverflow: Рисовать круг, используя только css Это здорово. Но я хотел бы знать, как изменить этот пример, чтобы включить текст в середине круга? Я также нашел это: Вертикально и горизонтально центрируя текст по кругу в ...
17 мая '13 в 18:11
16

Как нарисовать круг на странице html?

Как вы рисуете круг, используя HTML5 и CSS3? Можно ли также поместить текст внутри?
03 авг. '11 в 4:53
7

Рисовать круг, используя только css

Можно ли рисовать круг, используя только css, который может работать на большинстве браузеров (IE, Mozilla, Safari)?
04 авг. '11 в 6:18
6

Как создать "подсказку хвоста" с помощью чистого CSS?

Я просто наткнулся на аккуратный трюк CSS. Посмотрите скрипку... .tooltiptail { display: block; border-color: #ffffff #a0c7ff #ffffff #ffffff; border-style: solid; border-width: 20px; width: 0px; height: 0px; } .anothertail { backgr...
11 апр. '11 в 14:46
10

Как сделать фантастическую стрелку с помощью CSS?

Хорошо, так что все знают, что вы можете сделать треугольник, используя это: #triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } И это со...
15 дек. '14 в 20:04
2

Пользовательский цвет границы треугольника CSS

Попытка использовать пользовательский шестнадцатеричный цвет для моего треугольника css (граница). Однако, поскольку он использует свойства границ, я не уверен, как это сделать. Я хотел бы избегать javascript и css3 просто из-за совместимости. Я пыта...
26 февр. '12 в 5:12
4

Управление штриховой длиной штриха и расстоянием между штрихами

Можно ли управлять длиной и расстоянием между штриховыми штрихами штриха в CSS? В этом примере ниже отображаются разные браузеры: div { border: dashed 4px #000; padding: 20px; display: inline-block; } <div>I have a dashed border!<...
05 мая '10 в 7:01
3

Форма с наклонной стороны (отзывчивая)

Я пытаюсь создать фигуру, как на изображении ниже, с наклонным краем только на одной стороне (например, на нижней стороне), в то время как другие края остаются прямыми. Я попытался использовать метод border (код приведен ниже), но размеры моей фи...
25 мая '15 в 14:58