Articles of css forms

как установить форму в div

Я хотел бы установить форму тега div . Все работает отлично, но когда я устанавливаю тег img внутри этой формы, он не показывает хорошо. Мой код CSS: #chevron{ width: 350px; height: 100px; background: #337AB7; border-radius: 10px 10px 0 0; position: relative; } #chevron:before { content: ”; position: absolute; top: 20px; left: 0; height: 100%; width: […]

Разделите два divs на другой изогнутый / арочный div

Я хочу создать макет сайта, содержащий несколько изображений полной ширины, которые выровнены по вертикали. Изображения должны быть разделены изогнутым элементом, который идеально создается с помощью HTML / CSS, поскольку ширина может меняться, и кривая всегда должна заполнять 100% ширину. Я загрузил визуализацию своей проблемы здесь: Я пробовал некоторые вещи с border-radius , например: http://jsfiddle.net/37u4c/34/, но […]

Css 3 обычная трапеция

Привет, мне нужно создать div, который будет выглядеть как один на предоставленном изображении. Обратите внимание на черные и серые зоны. Я экспериментировал с css 3, но я смог создать только по-разному повернутую трапецию. Можно ли создать это только с помощью css? РЕДАКТИРОВАТЬ: Что я видел, это trapezoid { border-bottom: 100px solid red; border-left: 150px solid […]

Создание странной формы в CSS

Я пытаюсь создать эту форму в css. Я пошел настолько далеко, насколько могу, и не могу создать шип с правой стороны Вот мой CSS nav li a { float: left; height: 23px; line-height: 24px; position: relative; padding: 1px 10px 0 24px; color: #fff; background-color: #393233; text-align: center; width:75%; } nav li a:before { content: “”; […]

Шаблон пользовательской формы CSS с двумя цветами

Я пытаюсь создать эту «кнопку» с помощью CSS. Я также хотел бы добавить текст «ABI» и «12/19» вручную в свой HTML, чтобы я мог его изменить. Приложил результат, который я хотел бы иметь с размерами. Спасибо за вашу помощь.

css arrow с нижней границей

Мне нужно создать стрелку внутри div. Я создал стрелку, но мне нужно получить эффект visul с границей, как показано ниже Демонстрация опробованного образца http://jsfiddle.net/rLZkf/4/ div { margin: 20px; height: 200px; width: 200px; background-color: #c1c1c1; border: #000 solid 2px; background-image: -webkit-linear-gradient(135deg, transparent 75%, #fff 75%), -webkit-linear-gradient(45deg, transparent 75%, #fff 75%); background-image: -moz-linear-gradient(135deg, transparent 75%, #fff 75%), […]

CSS разбил квадрат на 4 треугольника

В настоящее время я пытаюсь сделать квадрат равным 4 треугольникам одинакового размера, которые имеют наводящие события на них. Я создаю такие треугольники, .right, left, .top, .bottom { position: relative; width: 26px; } .right:before{ position: absolute; display: inline-block; border-top: 26px solid transparent; border-right: 26px solid #eee; border-bottom: 26px solid transparent; left: 26px; top: 0px; content: ”; […]

Шестиугольные изображения

Изображения круга Я могу получить границы круга с помощью border-radius : img { border-radius: 50%; } Шестиугольные изображения Однако я надеюсь создать шестиугольные изображения. Я предполагаю, что потребуется обертка изображений в div / span (или нескольких из них). Что-то вроде любого из них: Для простоты все изображения квадратные . Задача Точка получения изображений, как это, […]

Трапецовидный div в CSS

Я хочу разделы с контентом в трапецовидном div но я не знаю, как начать или как лучше всего достичь моей цели: Я столкнулся с этим решением, но для меня не так много информации, чтобы понять CSS3 Transform to Trapezoid HTML content here

Как достичь наклонного правого края?

Я искал несколько дней для кода, чтобы сделать правый край div наклон 45 gradleусов. Вот пример изображения того, что я особенно пытаюсь получить … Кажется, что есть много примеров «наклонных границ» div, но я не могу найти их с конкретной правой стороны. Я потратил много времени, пытаясь изменить коды других, но это заканчивается беспорядком. Это […]