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

На этот вопрос есть ответы на Переполнение стека на русском : Как создать треугольники CSS? В CSS Tricks есть множество различных форм CSS - Формы CSS, и я особенно озадачен треугольником: #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } …

1847 css  geometry  polygon  css-shapes 

Как мне создать меню, которое выглядит следующим образом ... Ссылка на PSD Я не хочу использовать PSD изображения. Я бы предпочел использовать иконки из какого-то пакета, такого как FontAwesome, и иметь фоны / CSS, созданные в CSS. Версия меню, в которой используется PSD для создания изображений всплывающей подсказки и последующего …

321 css  tooltip  css-shapes 

Я хотел бы окружить число в круг, как на этом изображении: Возможно ли это и как это достигается?

250 html  css  css-shapes 

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

229 javascript  css  canvas  html5-canvas  css-shapes 

Как мне создать такую ​​фигуру для отображения на веб-странице? Я не хочу использовать изображения, так как они будут размыты при масштабировании Я попробовал с CSS : .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } <div class="tear"> </div> …

223 html  css  svg  css-shapes 

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

206 html  css  css-shapes 

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

183 html  css  geometry  css-shapes 

Я нашел этот пример на stackoverflow: Нарисуйте круг, используя только CSS Что здорово. Но я хотел бы знать, как изменить этот пример, чтобы я мог включить текст в середине круга? Я также нашел это: вертикально и горизонтально центрируя текст по кругу в CSS (например, значок уведомления iphone) но по какой-то …

156 css  css-shapes 

Можно ли в CSS контролировать длину и расстояние между штрихами пунктирной границы? Этот пример ниже отображается по-разному в разных браузерах: div { border: dashed 4px #000; padding: 20px; display: inline-block; } <div>I have a dashed border!</div> Запустить фрагмент кодаСкрыть результатыРазвернуть фрагмент Большие различия: IE 11 / Firefox / Chrome Существуют …

124 css  border  css-shapes 

Если я использую значение в пикселях или em для border-radius, радиус края всегда представляет собой дугу окружности или форму таблетки, даже если значение больше, чем наибольшая сторона элемента. Когда я использую проценты , радиус края является эллиптическим и начинается в середине каждой стороны элемента, что приводит к овалу или эллипсу …

124 css  css-shapes 

Как нарисовать круг с помощью HTML5 и CSS3? Можно ли также поместить внутрь текст?

118 html  css  geometry  css-shapes 

Попытка использовать собственный шестнадцатеричный цвет для моего треугольника (границы) css. Однако, поскольку он использует свойства границы, я не уверен, как это сделать. Я хотел бы держаться подальше от javascript и css3 просто из-за совместимости. Я пытаюсь сделать треугольник белым фоном с границей 1 пиксель (вокруг угловых сторон треугольника) с цветом …

114 css  border  css-shapes 

Закрыто. Этот вопрос не соответствует рекомендациям по переполнению стека . В настоящее время он не принимает ответы. Хотите улучшить этот вопрос? Обновите вопрос, чтобы он соответствовал теме Stack Overflow. Закрыт 5 лет назад . Уточните этот вопрос Я искал этот веб-сайт, чтобы найти индикаторы выполнения, но те, которые мне удалось …

112 html  css  progress-bar  progress  css-shapes 

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

102 html  css  css-shapes 

Я пытаюсь создать форму, как на изображении ниже, со скошенным краем только с одной стороны (например, с нижней стороны), в то время как другие края остаются прямыми. Я пробовал использовать метод границы (код приведен ниже), но размеры моей формы динамические, поэтому я не могу использовать этот метод. .shape { position: …

93 html  css  responsive-design  css-shapes