Рисование наклонных линий в CSS
То, что я пытаюсь сделать, ВЫГЛЯДИТ просто, но я не могу понять, как это сделать.
Как вы можете видеть на моем изображении, есть пара красных линий, которые проходят через нижнюю часть, затем изгибаются вверх к правой стороне. Есть ли способ в CSS нарисовать такую линию? Свободный перевод вопроса Drawing angled lines in CSS от участника @Sherwin Flight.
Отслеживать
Alexandr_TT
задан 6 сен 2020 в 17:36
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
Линия(полоска) в css
Как сделать выделенную линию(полоску) в css под текстом с отступами?
Отслеживать
задан 1 апр 2020 в 8:19
Григорий Калашников Григорий Калашников
91 7 7 бронзовых знаков
p:after — пробовали ?
1 апр 2020 в 8:48
А какие стили применить к псевдоэлементу after?
1 апр 2020 в 9:16
width: 20px; height: 2px; background: #ccc; position: absolute; bottom: 0; left; 0; content: «»;
1 апр 2020 в 9:17
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
h1 < display: inline-block; position: relative; >h1:before
Заголовок
Отслеживать
ответ дан 1 апр 2020 в 10:27
Sevastopol’ Sevastopol’
28.1k 12 12 золотых знаков 74 74 серебряных знака 143 143 бронзовых знака
Почему бы не использовать тег hr для этого? Или решение должно быть чисто на css?
Отслеживать
ответ дан 1 апр 2020 в 10:53
56 5 5 бронзовых знаков
А как у hr добавить отступ?
1 апр 2020 в 14:01
через стили, в принципе
1 апр 2020 в 15:23
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как нарисовать линию в css
Всем привет! Сегодня я расскажу Вам о том, как с помощью html сделать горизонтальную линию.
На самом деле, необходимость сделать горизонтальную линию возникает достаточно часто, например, когда нужно отделить одну часть текста от другой.
Горизонтальная и вертикальная линии с помощью css
Сделать это можно с помощью css. Для этого, я заключаем необходимый участок текста в блок с помощью тега div, а затем в файле style.css или непосредственно в html — коде прописываем для этого блока свойства для верней или нижней границы с помощью border-top и border-bottom. Вот пример:
В данном случае, я задал оформление с помощью css непосредственно из кода html, и сделал верхнюю границу сплошной, а нижнюю пунктирной линией.
Вот как это будет выглядеть на странице:
Горизонтальная линия с помощью css.
У этого способа есть свои преимущества:
- Большой ассортимент настроек, которые позволяют задать практически любой вид для линии;
- Можно создавать как горизонтальные так и вертикальные линии. Для того, чтобы сделать вертикальные линии необходимо поменять border-top на border-left, а border-bottom на border-right.
К недостаткам можно отнести относительную громоздкость кода.
Однако, как оказалось, вставить в текст горизонтальную черту можно и с помощью html. При этом, даже не обязательно лезть в css. Для этого используется тег .
Горизонтальная линия с помощью тега html
Первая особенность этого тега состоит в том, что у него нет парного закрывающего тега. Его можно использовать в любом месте html – кода между тегами и
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Сделать горизонтальную линию на странице.
Решение
Горизонтальные линии хорошо использовать для отделения одного блока текста от другого. Небольшой по размеру текст, сверху и снизу которого располагаются горизонтальные линии, привлекает больше внимания читателя, чем обычный текст.
С помощью тега можно нарисовать горизонтальную линию, вид которой зависит от используемых атрибутов, а также браузера. Тег относится к блочным элементам, поэтому линия всегда начинается с новой строки, а после неё все элементы отображаются на следующей строке. Благодаря множеству атрибутов тега линией, созданной через этот тег, легко управлять. Если ещё подключить мощь стилей, то добавление линии в документ превращается в простое занятие.
По умолчанию линия отображается серого цвета и с эффектом объема. Такой вид линии не всегда подходит к дизайну сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно подходят к этому вопросу, из-за чего придется использовать сразу несколько стилевых свойств. В частности, старые версии браузера Internet Explorer для цвета линии применяют свойство color , а остальные браузеры — background-color . Но это еще не все, при этом обязательно следует указать толщину линии (свойство height ) отличной от нуля и убрать рамку вокруг линии, задавая значение none у свойства border . Собирая все свойства воедино для селектора hr , получим универсальное решение для популярных браузеров (пример 1).
Пример 1. Горизонтальная линия
HTML5 CSS 2.1 IE Cr Op Sa Fx
Результат данного примера показан на рис. 1.
Приветствую вас, дорогие друзья!
При верстке страницы, иногда, возникает необходимость выделения заголовка или какого-то блока на странице горизонтальной линией. Например, вот так:
Навигация по статье:
Такую черту можно сделать несколькими способами. Сегодня мы рассмотрим вариант с добавлением горизонтальной линии HTML-тегом.
Специальный HTML-тег для задания горизонтальной линии
Итак, какой из тегов HTML рисует горизонтальную линию? Как это ни странно, в HTML для этой цели предусмотрен специальный тег . Внешний вид такой линии зависит от заданных параметров.
В примере для не задано никаких параметров визуализации и результат выглядит вот так:
Горизонтальная линия HTML
В данном случае для тега были применены параметры, прописанные в теме WordPress моего сайта. В вашем случае горизонтальная линия HTML может выглядеть по-другому.
Визуализация горизонтальной линия HTML с помощью атрибутов
Для тега можно использовать специальные атрибуты, которые позволят задать необходимые параметры внешнего вида. Вот перечень доступных для использования атрибутов:
- align — выравнивание по горизонтали. Доступные значения: center, left, right. По умолчанию задано выравнивание по центру.
- color – цвет. Задается шестнадцатеричным числом или названием цвета.
- noshade — линия без трехмерных эффектов. Трехмерный эффект работает только в том случае если для линии не был задан цвет.
- size – толщина. Задается любым целым положительным числом. 0 задает толщину равную 1 пикселю.
- width – ширина. Можно задавать в пикселях или процентах.
Как сделать горизонтальную линию в css
Для формирования горизонтальной линии можно пойти разными путями. Давайте рассмотрим некоторые из них:
Вариант №1. Можно определить обычный div элемент и покрасить у него одну из сторон с помощью свойства border.
class="create-line">