Описание тега css-shapes
CSS-формы создаются с помощью каскадных таблиц стилей для преобразования HTML-элементов в формы и изображения. Самые простые формы включают треугольники, квадраты и круги, но могут быть преобразованы в более сложные формы, такие как сердца, восьмиугольники и звезды.
1
ответ
Как сделать треугольник с фоновым рисунком в CSS3?
Я пытаюсь сделать следующее с помощью CSS Сделать треугольник с помощью CSS несложно, но я не знаю, как придать ему непрозрачный фон. Какие-либо предложения? редактировать: фоновый рисунок представляет собой изображение в формате PNG.
23 апр '14 в 13:46
2
ответа
Сделать круг большим, сохраняя круг, как фигура (CSS)
Поэтому у меня есть кружок в html и css, и, похоже, когда я делаю его слишком большим, он начинает превращаться в странный шарик. Как бы я сделал его большим, и все же сохранил бы форму круга? Спасибо! Вот jsfiddle: http://jsfiddle.net/aritro33/bUqN…
12 янв '14 в 17:33
1
ответ
Частично закрасить границу фигуры цветом
Я пытаюсь создать эффект прогресса, при котором цвет заполняет границу объекта DOM (или, возможно, фон). Прикрепленное изображение должно дать вам лучшее представление о том, для чего я иду. Я достиг текущего результата, добавив объект со сплошным ф…
11 окт '16 в 14:15
2
ответа
Круг Div шар
Вот мой текущий CSS для изображения круга Baloon .circle-image{ width: 64px; height: 64px; border-radius: 50%; background-size: contain; background-position: center; background-image: url("/assets/img/dashboard/img-stdn.png"); display: block; } И вы…
29 май '15 в 07:03
2
ответа
CSS вертикальный центр по кругу
Я пытаюсь отцентрировать текст по центру якоря. Я использовал высоту строки, и она работает, но когда текст переносится, текст во второй строке получает высоту строки... Как я могу центрировать текст в привязке так, как это происходит? http://jsfidd…
17 мар '12 в 19:52
2
ответа
Сделать шестиугольник с рамкой, закругленными углами и прозрачным фоном
Я хочу сделать шестиугольную форму с рамкой, закругленными углами и прозрачным фоном в CSS3, как на этом изображении: Я не могу сделать это с закругленными углами и границей. Мой код здесь: #hexagon-circle { position: relative; margin: 1em auto; wid…
24 апр '16 в 20:52
1
ответ
Как создать трапецию с вогнутой стороной в CSS3?
Я пытаюсь создать трапецию с одной вогнутой стороной. Я предпочитаю решение CSS3, которое совместимо с браузерами и отзывчиво. Я нашел этот пост, который предоставляет решение, очень похожее на мое ожидаемое решение. Однако я предпочитаю, чтобы вогн…
02 дек '16 в 11:21
4
ответа
Как организовать структуру div с радиусом, используя CSS
Я пытаюсь создать HTML-страницу, показанную на этом образце изображения. http://i57.tinypic.com/14udpo4.png Я хочу разместить другой компонент поверх этого черного и бордового кругов. Для этого я использую тег Структура div и span. И используя span …
21 апр '15 в 08:25
3
ответа
Кнопка со стрелкой вправо - переход
Я сделал кнопку CSS с правой границей в форме стрелки, с помощью преобразований CSS и псевдоэлементов. Сейчас я пытаюсь добавить переход к фону при наведении, но понял, что есть проблема, в месте, где кнопка перекрывается псевдоэлементом, во время п…
13 май '16 в 08:57
0
ответов
Бутстрэп-лейбл со стрелкой
Я выясняю, как сделать так, чтобы ярлык начальной загрузки указывал на строку. Мое решение: Но это плохо масштабируется и выглядит очень непрофессионально. Основываясь на Bootstrap Label, код: .your-request-arrow { position: absolute; left: -67px; m…
12 мар '15 в 10:57
3
ответа
Круг / Пончик с отрезанным куском
Как я могу сделать изображение, подобное изображенному ниже, с использованием чистого CSS или холста? Мне нужно, чтобы он имел прозрачный фон; можешь помочь мне в этом?
18 апр '13 в 15:51
2
ответа
Всплывающая подсказка / Речевой пузырь с градиентным фоном и стрелкой в верхнем центре
У меня есть эта форма: и мне было интересно, если это возможно, чтобы создать его с помощью CSS3. Это то, что я до сих пор (нажмите на скрипку): HTML: <div id="cafeDialog" role="dialog" class="cafeDialog caspSearch" style=""> <div data-titl…
30 янв '13 в 11:14
1
ответ
Как сделать изогнутый заголовок с помощью SVG или другого адаптивного решения
Я пытаюсь сделать изогнутый заголовок. И мне интересно, если кто-нибудь может указать мне правильное направление / или лучший метод заголовка, как на следующем рисунке. Я не разработчик, поэтому я лажа. вот изображение темы и изогнутый заголовок А в…
31 янв '18 в 18:12
7
ответов
html/css шестиугольник с изображением внутри
Есть ли возможность разместить изображение внутри шестиугольника? Я привык к ячейкам шестиугольной формы в html, но я не смог заполнить их изображением (фон?). Вот что я попробовал: .top { height: 0; width: 0; display: block; border: 20px solid red;…
15 сен '11 в 15:32
2
ответа
Почему Firefox показывает тень под моей формой CSS?
Я использую треугольник на своем сайте, как показано на http://css-tricks.com/examples/ShapesOfCSS/ К сожалению, это не отображается правильно во всех браузерах, когда немного растянут. Мой код div.triangle { width:0px; height:0px; border-left: 55px…
27 ноя '12 в 10:19
4
ответа
Создание треугольника только с CSS
Я разрабатываю адаптивное веб-приложение, и мне нужно создать две отдельные области контента следующим образом: Пока что я пытался, border-right: 30px solid transparent; border-bottom: 30px solid #4c4c4c; height: 100%; width: 100%; position: fixed; …
02 янв '16 в 05:41
1
ответ
Скошенный бордюр разного цвета контейнера CSS
Чего я хочу добиться: До сих пор я делал углы, как будто они были одного цвета с контейнером, а затем покрывал ненужную область "поддельным" квадратом, повернутым на 45 градусов. Мне не очень нравится результат, особенно в правом нижнем углу, и я не…
19 июн '14 в 16:57
4
ответа
Связь с границей и треугольником вниз прозрачная
Я не могу найти то, что мне нужно. У меня есть этот код <hgroup id="subheader"> <h1>lorem ipsum</h1> <h2>ipsum lorem</h2> <a href="#" class="arrow-down">read More</a> </hgroup> Я хочу, чтобы ссылка име…
02 окт '15 в 08:55
2
ответа
Самый эффективный способ создать диагональный блок контента?
Я наткнулся на эту аккуратную коробочку с заголовком: Когда я понял, что это похоже на то, что я хочу сделать на моем сайте. Посмотрев на источник, я заметил, что они использовали изображение, а не просто CSS. Я понимаю, что могу использовать изобра…
06 окт '14 в 08:04
4
ответа
CSS треугольник: перед элементом
Я использую начальную загрузку, пытаясь сделать div с треугольником CSS перед ним. http://jsfiddle.net/B2XvZ/11/ Вот мой нерабочий код: .d:before { width: 0px; height: 0px; border-style: solid; border-width: 10px 15px 10px 0; border-color: transpare…
15 дек '13 в 00:11