Как сделать пунктирную или прямую линию?

Как сделать полоску в css

Для формирования линии можно пойти разными путями. Давайте рассмотрим некоторые из них:

Вариант №1. Можно определить обычный div элемент и покрасить у него одну из сторон с помощью свойства border.

.create-line  width: 200px; border-top: 3px solid #32a1ce; > 

Вариант №2. Используем готовый тег который формирует горизонтальную линию — hr.

Вариант №3. С помощью псевдоэлементов :before или :after. Этот вариант немного сложнее, но за то мы обойдемся без правки HTML-кода. Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или с левой стороны элемента, то нам нужно использовать псевдоэлемент :before. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент :after.

 class="create-line-left"> Добавим линию снизу 

.create-line-left  padding-left: 20px; /* необходим для формирования позиций линии */ position: relative; /* весь блок будет занимать ширину по размеру контента в нём */ display: inline-block; > .create-line-left:before content: " "; background: #33CCFF; width: 150px; height: 1px; /* располагаем линию сверху от текста */ top: 25px; /* включаем абсолютное позиционирование относительно блока с relative */ position: absolute; > 

Источник

Как сделать горизонтальную линию в css

Для формирования горизонтальной линии можно пойти разными путями. Давайте рассмотрим некоторые из них:

Вариант №1. Можно определить обычный div элемент и покрасить у него одну из сторон с помощью свойства border.

.create-line  width: 200px; border-top: 3px solid #32a1ce; > 

Вариант №2. Используем готовый тег который формирует горизонтальную линию — hr.

Вариант №3. С помощью псевдоэлементов :before и :after. Этот вариант немного сложнее, но за то мы обойдемся без правки HTML-кода. Итак, если нам нужно разместить вертикальную или горизонтальную линию сверху или с левой стороны элемента, то нам нужно использовать псевдоэлемент :before. Если же линия должна быть справа или снизу, то мы должны использовать псевдоэлемент :after.

 class="create-line-left"> Добавим линию слева и справа 

.create-line-left  padding-left: 20px; /* необходим для формирования позиций линий */ position: relative; /* весь блок будет занимать ширину по размеру контента в нём */ display: inline-block; > .create-line-left:before content: " "; background: #33CCFF; width: 50px; height: 1px; /* располагаем линию сверху от текста */ top: 15px; /* включаем абсолютное позиционирование относительно блока с relative */ position: absolute; > .create-line-left:after content: " "; background: #333333; width: 50px; height: 1px; /* размещаем линию снизу и справа*/ bottom: 15px; right: 20px; /* включаем абсолютное позиционирование относительно блока с relative */ position: absolute; > 

Источник

СSS стили для горизонтальных линий

Сборник горизонтальных линий с тегом

---

разных видов и стилей.

Сплошные линии

Двойная линия

Многострочная линия

Двухцветная линия

Трехцветная линия

Горизонтальный градиент

Вертикальный градиент

Линия с тенью

Замыленная линия

Линия «Полка»

Пунктирные линии

Пунктирная линия с фоном

Пунктирная линия с градиентом

Точечные линии

Линия из крупных точек

 
') 0 0 100% repeat; background-position: 50%; box-sizing: border-box; color: orange; > 

Разное

Вертикальные линии

Линии под углом

Наклонные линии

Комментарии 2

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

Подчеркивание текста можно сделать с помощью нескольких свойств CSS — background-image, background-size и.

Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.

Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет.

Источник

Нарисовать линию в CSS

Как можно нарисовать такую линию в CSS , чтобы она масштабировалась и растягивалась по ширине экрана?

.line-first < margin: 20px; font-size: 250%; color: $pinkcolor; border-bottom: 4px solid #f50057; padding-bottom: 0px; width: 22.4%; margin-left: 100px; text-align: center; >.line-middle < position: relative; top: -52px; left: 389px; border: 2px solid #f50057; width: 85px; height: 0px; -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-40deg); >.line-second

5 ответов 5

h1 < display: flex; line-height: 1.5em; >span < border-bottom: 2px solid red; padding: 0 2em; >h1:before, h1:after < content: ""; order: 1; >h1:before < width: 1.5em; background: linear-gradient(-45deg, transparent calc(50% - 1px), red calc(50% - 1px), red calc(50% + 1px), transparent calc(50% + 1px)); >h1:after

При чём тут react понять сложно. На css можно сделать так:

* < box-sizing:border-box; >body < margin:0; padding:15px; >.line-block < display:flex; align-items:flex-start; color:red; >.line-block__title < flex:0 0 auto; padding:5px 40px; font-size:14px; font-weight:400; position:relative; margin:0 20px 0 0; border-bottom:1px solid; >.line-block__title:focus < outline:none; >.line-block__title:after < content:''; display:block; position:absolute; bottom:0; right:0; height:100%; transform-origin:left bottom; border-right:1px solid; transform:skewX(-39deg); >.line-block:after

UPD. В первом варианте левый край линии оказался скошен. Исправил.

По старинке, без флексбоксов и закрывая один псевдоэлемент фоном от другого. Зато подстраивается и под длину текста, и под количество строк в нём.

Отступы и высоту строки можно ставить любые. От угла наклона зависит только прибавка к толщине боковой границы. Этой прибавкой компенсируем сужение границы при трансформации сдвига.

.broken-line < overflow: hidden; position: relative; >.broken-line > span < border-bottom: 4px solid red; display: inline-block; padding: 6px 15px; /* для красоты, можно убрать или поменять */ position: relative; >.broken-line:before, .broken-line > span:before < box-sizing: border-box; content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transform-origin: left bottom; transform: skew(-60deg); z-index: -1; >.broken-line:before < border-top: 4px solid red; >.broken-line > span:before < background: white; /* заслонить часть псевдоэлемента у родителя */ border-right: 8px solid red; /* толще, чтобы компенсировать трансформацию */ bottom: -4px; /* вниз на толщину границы родителя */ >

Текст
 
Длинный текст 
в две строки

Первый вариант, со скошенным левым краем у линии. Может быть, тоже пригодится.

.broken-line < overflow: hidden; position: relative; >.broken-line > span < display: inline-block; padding: 6px 15px; /* для красоты, можно убрать или поменять */ position: relative; >.broken-line:before, .broken-line > span:before < content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transform-origin: left bottom; transform: skew(-60deg); z-index: -1; >.broken-line:before < border-top: 4px solid red; >.broken-line > span:before < background: white; /* заслонить часть псевдоэлемента у родителя */ border-bottom: 4px solid red; border-right: 8px solid red; /* толще, чтобы компенсировать трансформацию */ >

Текст
 
Длинный текст 
в две строки

Источник

Как сделать линию с помощью HTML и CSS

Для подчеркивания некоторых особенно важных элементов сайта, не помешало бы использовать всевозможные и предусмотренные для этого CSS стили и свойства. Конечно же, с текстом можно особо не заморачиваться и выделить его, к примеру, жирным или курсивом, изменить задний фон или сделать рамку вокруг текста. Но не всегда один из представленных способов является подходящим. Допустим, у вас есть текст, который нуждается в разделении из-за специфики его смысловой нагрузки. Вот тут-то и приходят на помощь HTML и СSS свойства.

Как сделать в тексте линию средствами CSS

Для реализации задуманного нам понадобится обратиться к файлу style.css, прописав в нем соответственное свойство border. Тем самым над, под или с определенной стороны текста появится линия. В свою очередь предусмотрено несколько свойств, отвечающих за отображение линии, а именно:

• border-top — горизонтальная линия, расположенная над текстом;
• border-right — вертикальная линия, расположенная справа от текста;
• border-bottom — горизонтальная линия, расположенная под текстом;
• border-left — вертикальная линия находящаяся слева.

Как сделать линию в html

Используя свойства CSS можно прописать все необходимые значения редактируя HTML код. Для этого нужно перейти в административную часть сайта. Выбрать один из опубликованных материалов, переключить текстовый редактор в режим правки HTML кода и внести свойства CSS. Образец можно лицезреть ниже.

Как сделать пунктирную или прямую линию?

Прописав данные свойства вам удастся подчеркнуть важность излагаемого материала, абзаца или заголовка?

Краткая расшифровка команд

Для более глубокого ознакомления со стилями рекомендую почитать эту статью.

Нужно уяснить, что в процессе внесения изменений в код сайта, свойства, определяющие тип линии, ее толщину и цвет перечисляются через пробел.

Приведенный способ имеет несколько достоинств:

• Обширный ассортимент возможностей, с помощью которых можно сделать практически любую линию.
• Легкость внесения всех необходимых изменений непосредственно в HTML код. Это во многом упрощает задачу для неопытных сайтостроителей.

Как сделать прямую горизонтальную линию с помощью тега HTML

Первое на что хотелось бы обратить ваше внимание, это то, что у данного тега, несмотря на все тонкости и принципы html, нет закрывающегося тега. Он может быть использован в любом месте html кода, между тегами и .

Атрибуты тега

• width — отвечает за длину линии. Может указываться как в процентах, так и пикселях.
• size — толщина линии. Указывается в пикселях.
• color — определяет цвет линии.
• align — атрибут, отвечающий за выравнивание линии.

К атрибуту align относятся следующие команды:

• right — выравнивание справа;
• left — выравнивание слева;
• center — центральное выравнивание.

Образец html кода с использованием тега

Надеюсь, у вас все получилось и теперь вы знаете, как сделать линию у себя на сайте. Назревшие вопросы оставляйте в комментариях, и мы обязательно их обсудим.

Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter

Источник