css-shapes- все статьи тега
Создание треугольника в css с градиентным фоном
Я пытаюсь создать треугольник в css с градиентным фоном. У меня пока не было никакого успеха. Есть ли способ сделать это, чтобы вызвать этот эффект, видимый на изображении ниже. (Треугольник, прикрепленный к неправильному окну ошибки пароля.) Дизайн в Photoshop Это дизайн, который у меня есть до сих пор в HTML и CSS. Вот css, который у меня есть для треугольника на данный момент. .error-triangle { wwidth: 0; height: 0; border-top: 10px solid transparent; border-botto ...
Очерчивание и частичное заполнение формы SVG
У меня здесь есть jsfiddle - http://jsfiddle.net/apbuc773/ Я хотел бы создать звезду, используя svg. Я хотел бы погладить внешнюю сторону звезды. В моем примере штриховка находится на каждой линии, которая рассекает внутреннюю форму. Также можно наполовину заполнить форму звезды. Я хотел бы использовать это для оценки звезд, но мне нужна половина и, возможно, четверть заполнения. <svg height="210" width="500"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="f ...
Как создать форму ценника в CSS и HTML
Итак, я нашел этот ответ - CSS3 форма меню, Стиль, но понятия не имею, как поместить его на левую сторону. Я уже искал его, но безуспешно. Вот чего я пытаюсь добиться: И я нашел это тоже - изменить форму треугольника. Как я могу заставить его работать на противоположной стороне? Я имею в виду, что стрелка должна быть с левой стороны. И возможно ли это сделать с одним div? ...
Создание динамической формы в виде стрелки с помощью CSS
Я хотел бы создать сложную стрелкообразную форму с CSS, как это изображение: Это текущий код: .camera_caption { position: relative; background-color: greenyellow; left: 0; margin-top: 263px; width: 717px; /*height: 234px;*/ padding-left: 365px; font: normal 14px/24px 'Roboto'; color: #fff; } .camera_caption:after { content: ""; background: url(../images/capture_bg2.png) 0 0 no-repeat; position: absolute; height: 234px; width: 119px; ...
CSS: размещение стрелки / треугольника с границей в верхней части моего выпадающего меню
Только что запустил этот сайт (http://dovidoved.org / ) и клиент хочет один из этих треугольников / стрелок в верхней части каждого выпадающего меню. Проблема в том, что меню имеет границу вокруг него, и стрелка должна зацепиться как с фоном, так и с границей. Не знаю, как это сделать. Есть предложения? Должен ли я использовать изображение? Вот мой CSS: /* creates triangle */ .main-navigation ul ul:before { border-bottom: 10px solid #fae0bb; border-left: 10px solid transparent; ...
Квадратные скобки с CSS
Я хочу создать скобки [ и ] только с помощью CSS. Есть ли способ указать верхнюю и нижнюю границу (без разрезания изображения), чтобы она выглядела как скобка? .bracket { border-top:20px; border-bottom:20px; border-right:none; border-left: 1px solid black; } ...
Как работают CSS треугольники?
есть много различных форм CSS в CSS трюки-формы 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> Как и почему это работает? ...
Как использовать CSS, чтобы окружить число кругом?
Я хотел бы окружить ряд по кругу, как на этом изображении: возможно ли это и как это достигается? ...
Более простой способ создать круг div, чем с помощью изображения?
Мне интересно, есть ли более простой способ создать круговые дивы, чем то, что я делаю сейчас. В настоящее время я просто делаю изображение для каждого разного размера, но это раздражает. есть ли в любом случае использование CSS для создания divs, которые являются круглыми, и я могу указать радиус? ...
css: как нарисовать круг с текстом в середине?
Я нашел этот пример на StackOverflow: нарисуйте круг, используя только css это здорово. Но я хотел бы знать, как изменить этот пример, чтобы я мог включить текст в середине круга? Я также нашел это: вертикальное и горизонтальное центрирование текста по кругу в CSS (например, значок уведомления iphone) но по какой-то причине, он не работает для меня. Когда я создаю следующий тестовый код: <div class="badge">1</div> вместо круга я получаю овальную форму. Я пытаюсь поиграть с ...
Произведите повторяя шестиугольную картину с CSS3
Итак, мне нужно сделать повторяющийся шестиугольный узор, используя CSS. Если нужны изображения, я могу пойти туда, но я бы предпочел просто использовать CSS, если это возможно. вот идея того, что я пытаюсь создать: в принципе, мне просто нужен способ создать шестиугольные фигуры, а затем наложить текст/изображения поверх них. У меня пока мало кода, потому что я не совсем уверен, с чего начать. Проблема в том, что я мог бы просто использовать <div>s в форме a шестиугольник, как показан ...
Как нарисовать сектор круга в CSS?
ну, рисовать круг с чистым CSS легко. .circle { width: 100px; height: 100px; border-radius: 100px; border: 3px solid black; background-color: green; } как нарисовать сектор? Учитывая степень X [0-360] я хочу нарисовать сектор х градусов. Могу ли я сделать это с помощью чистого CSS? например: Спасибо + Пример спасибо, Джонатан, я использовал Первый способ. Если это кому-то помогает, вот пример функции JQuery, которая получает процент и рисует сектор. Сектор находится ...
Перекрывающиеся круги в CSS с 1 div
Я ищу, чтобы создать эту форму перекрывающихся кругов в CSS: в основном, просто сложенные круги. Я посмотрел вокруг, и все решения, которые я вижу, включают в себя использование нескольких элементов div для этого эффекта. Однако, не может ли это быть сделано с помощью одного div, используя CSS3? Я посмотрел, как это можно легко сделать, и понял, что, если все цвета одинаковы, у вас будет форма таблетки, например это: http://jsfiddle.net/5wytm0r4/ #circles { background-color: red; ...
Как перекосить элемент, но сохранить текст нормальным (unskewed)
можно ли воспроизвести это изображение, используя только CSS? Я хочу применить это к моему меню, так что коричневый фон появляется на hover экземпляр Я не знаю как это сделать, я только; .menu li a:hover{ display:block; background:#1a0000; padding:6px 4px; } ...