Как сделать кривые линии в css

Обновлено: 07.07.2024

Всем привет! Сегодня я расскажу Вам о том, как с помощью html сделать горизонтальную линию.

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

Горизонтальная и вертикальная линии с помощью css

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

В данном случае, я задал оформление с помощью css непосредственно из кода html, и сделал верхнюю границу сплошной, а нижнюю пунктирной линией.

Вот как это будет выглядеть на странице:

Горизонтальная линия с помощью css.

У этого способа есть свои преимущества:

Большой ассортимент настроек, которые позволяют задать практически любой вид для линии;
Можно создавать как горизонтальные так и вертикальные линии. Для того, чтобы сделать вертикальные линии необходимо поменять border-top на border-left, а border-bottom на border-right.

К недостаткам можно отнести относительную громоздкость кода.

Между прочим, если Вы еще не знаете что такое css и какие оно дает преимущества, то подробнее об этом можно прочитать здесь.

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

Горизонтальная линия с помощью тега html

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

Все примеры не имеют классы и привязаны непосредственно к самому тегу.

Вариант 1

Простой пример с двумя точками.

Вариант 2:

Пример с тремя точками, которые плавно меняют свой цвет.

Вариант 3:

Несколько точек с использованием SVG.

Вариант 4:

Еще один пример на SVG c анимацией.

Вариант 5:

Пример с бегущей линией.

Чтобы избежать появления горизонтальной прокрутки, когда полоска уходит за предел блока, он должен иметь стиль overflow-x: hidden; .

Вариант 6:

Наклонная линия с градиентом и контентом по середине (на примере это солнышки).

Вариант 7:

Еще одна линия с градиентом и небольшой анимацией.

Вариант 8:

Пример горизонтальной линии с тенью.

background-image : radial-gradient ( farthest-side at 50% -50%, rgba ( 0, 0, 0, 0.5 ) , rgba ( 0, 0, 0, 0 ) ) ;

background-image : linear-gradient ( 90deg, rgba ( 0, 0, 0, 0 ) , rgba ( 0, 0, 0, 0.75 ) 50%, rgba ( 0, 0, 0, 0 ) ) ;

Вариант 9:

Зигзагообразная линия, сделанная линейным градиентом.

background-image : linear-gradient ( 315deg, rgba ( 191, 226, 255, 1 ) 30%, transparent 30% ) , linear-gradient ( 45deg, rgba ( 191, 226, 255, 1 ) 30%, transparent 30% ) ;

background-image : linear-gradient ( 135deg, rgba ( 191, 226, 255, 1 ) 30%, transparent 30% ) , linear-gradient ( 225deg, rgba ( 191, 226, 255, 1 ) 30%, transparent 30% ) ;

Вариант 10:

И еще один простенький пример с применением линейного градиента без переходов.

Смотрите также:

Варианты установки SVG иконки

Установка SVG иконки графическим файлом, на HTML, CSS и JS

Новогодняя открытка

Блок-секция с поздравительной открыткой к Новому Году.

Адаптивная таблица на CSS

Вариант оформления таблицы, которая меняет расположение ячеек на узких экранах

Добавить комментарий:

Отличный сайт и годный контент. Не много прокачал вариант 7. Хотел поделиться модификацией и закинуть код в коммент, а сайт ругается, либо запрещенный тег или слишком часто пишу, хотя там только html и css.

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

Интересно, но ваш вариант ИМХО больше подходит для разделения секций (как Вариант 6), это цельная линия и стрелка вниз, показывающая что ниже еще есть информация.
Линиями я обычно отделяю абзацы или заголовки, это для себя в основном и делал.
Но ваш вариант пригодится, Спасибо! Там можно увеличить стрелку, покрасить и даже привязать на стрелку событие.

Спасибо, крутые линии :)))

Спасибо за комментарий, пока читал его в хроме, нашел 3 ошибки в нем 🙂
Исправил сейчас.

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

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

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

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

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

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

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

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

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

Может быть достигнуто с помощью манипулирования радиусом границы

Измените высоту согласно требованиям!

Вы можете играть с параметрами в соответствии с вашими потребностями!

Еще в рубрике

Как сделать половину шестиугольника с помощью CSS с границей над прямоугольником с рамкой с изображением в середине полусегмента

Читайте также: