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

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

Как сделать гладкую пунктирную анимацию вращения границы, например "марширующие муравьи",

Я работаю над анимацией css, использующей "cogs и цепочки", но не могу создать "гладкую" последовательность чередования границ. Вы можете видеть в этом fiddle Как (в настоящее время) Я использую псевдоэлемент для генерации эффекта "вращения". Это де...
24 февр. '15 в 10:44
4

Форма капсулы с использованием радиуса границы без заданной ширины или высоты?

Можно ли сделать форму капсулы с использованием радиуса границы без заданной ширины или высоты? Я хочу, чтобы левая и правая стороны были полностью закруглены, а капсула оставалась бы прямой вдоль ее горизонтальной длины. Установка радиуса до 50%, п...
13 сент. '13 в 20:45
5

CSS Речевой пузырь с тенью коробок

Создание DIV, который использует CSS для рисования треугольника влево. Пытается применить равномерную тень коробок как к родительскому, так и к псевдоэлементу (см. Изображения) и коду. Возможно ли это? Или мне лучше использовать border-image для это...
15 янв. '12 в 0:55
3

Прозрачная стрелка/треугольник с отступом

Я хотел бы сделать прозрачную стрелку над изображением. Этот треугольник должен быть отступом в полупрозрачном блоке и отображать фоновое изображение. Требуемый вывод: .barShow { background-color: #000; opacity: 0.5; } .barShow:before ...
20 мая '14 в 11:44
11

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

Как нарисовать символ галочки с помощью CSS? Символы, которые я нахожу с помощью Unicode, не являются эстетически приятными. ИЗМЕНИТЬ Значки шрифтов - отличное предложение. Я искал что-то вроде this.
23 февр. '14 в 12:59
6

Вертикально и горизонтально центрирующийся текст в круге в CSS (например, значок уведомления iphone)

Я ищу способ сделать кросс-браузерный значок, похожий на iphone, в CSS3. Я, очевидно, хотел бы использовать один div для этого, но альтернативные решения были бы прекрасны. Важным фактором является то, что он должен быть горизонтально и вертикально ц...
26 янв. '11 в 3:26
6

Как создать круглую стрелку только с HTML и CSS?

Я пытаюсь создать круглую направленную стрелку с CSS и HTML. Ниже приведены мои попытки. Попытка 1 В этом я повернул <div> и стрелку, но оба они находятся в разных положениях. Это CSS: #curves div { width: 100px; height: 100px; ...
05 мая '15 в 9:26
4

Как сегментировать круг с разными цветами с помощью CSS

Я хочу, чтобы иметь возможность рисовать круг с его сегментом другого цвета, я хотел бы, чтобы количество охватываемого сегмента увеличивалось с шагом 10% от 0% до 100%. Любые примеры в Google - это все сектора, а не сегменты. Пока это лучшее, ...
23 мая '15 в 13:04
9

рисовать диагональные линии в фоновом режиме с помощью CSS

У меня есть div для окна предварительного просмотра: HTML: <div class="preview-content">PREVIEW</div> CSS: .preview-content { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8...
02 авг. '13 в 8:41
5

Прозрачный полый или вырезанный круг

Можно ли вырезать полый круг, используя только CSS? Это все мы можем сделать: Но можем ли мы это сделать? Круг должен быть полым и прозрачным. Таким образом, проблема не решена путем размещения сплошной цветовой окружности над div.
27 нояб. '11 в 15:16
6

Как перекосить элемент, но сохранить текст нормальным (не подверженным курку)

Можно ли воспроизвести это изображение, используя только CSS? Я хочу применить это к своему меню, поэтому коричневый фон появляется на hover экземпляре Я не знаю, как это сделать, у меня есть только: .menu li a:hover{ display:block; ...
30 июл. '13 в 12:51
3

Как получить разорванный эффект бумаги со случайными зубами пилы?

Я пытаюсь сделать разорванный эффект бумаги, как показано ниже: с порванным эффектом на нижней стороне. Я видел это и смог сделать эффект рваной бумаги, как показано ниже .box { width: 300px; height: 150px; background: darkred; posi...
10 нояб. '15 в 8:47
5

Можно ли создать эту форму (два частичных круга, соединенных вместе) с CSS?

Я пытался выполнить эту границу для двух div с CSS: Я попробовал использовать border-radius, но два частичных круга не сжимаются вместе: http://jsfiddle.net/uwz6L79w/ .left { position: absolute; left: 0; top: 0; width: 100px; ...
24 нояб. '15 в 8:19
8

Квадрат DIV, где высота равна области просмотра

Мне нужно создать DIV, где width=height и height=100% окна просмотра (что, очевидно, является переменной). Другими словами, идеальный квадрат DIV, который вычисляет его размеры в зависимости от высоты окна просмотра. Элементы внутри этого DIV буд...
14 июл. '11 в 13:32
6

CSS 3 Форма: "Обратный круг" или "Вырезать круг"

Я хочу создать форму, которую я бы назвал "обратным кругом": Изображение как-то неточно, потому что черная линия должна продолжаться вдоль внешней границы элемента div. Вот демонстрация того, что у меня есть на данный момент: http://jsfiddle.net...
08 мая '12 в 15:17