Как нарисовать сектор круга в CSS?
А как нарисовать сектор? Учитывая угол X — [0-360] , я хочу нарисовать сектор X градусов. Могу ли я сделать это с помощью чистого CSS ? Для примера: Если это поможет кому-то, вот пример функции JQuery , которая получает процент и рисует сектор.
$(function drawSector() < var activeBorder = $("#activeBorder"); var prec = activeBorder.children().children().text(); if (prec >100) prec = 100; var deg = prec * 3.6; if (deg else < activeBorder.css('background-image', 'linear-gradient(' + (deg - 90) + 'deg, transparent 50%, #39B4CC 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)'); >var startDeg = $("#startDeg").attr("class"); activeBorder.css('transform', 'rotate(' + startDeg + 'deg)'); $("#circle").css('transform', 'rotate(' + (-startDeg) + 'deg)'); >);.container < width: 110px; height: 110px; margin: 100px auto; >.prec < top: 30px; position: relative; font-size: 30px; >.prec:after < content: '%'; >.circle < position: relative; top: 5px; left: 5px; text-align: center; width: 100px; height: 100px; border-radius: 100%; background-color: #E6F4F7; >.active-border
Свободный перевод вопроса How to draw a circle sector in CSS? от участника @Itay Gal.
Отслеживать
Alexandr_TT
задан 29 апр 2018 в 16:46
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
ассоциация:stackoverflow.com/q/21205652/7394871
29 апр 2018 в 16:54
5 ответов 5
Сортировка: Сброс на вариант по умолчанию
Решение с толстой границей и stroke-dasharray .
В svg обводка элемента распространяется по обе стороны от его реальной границы:
.example
Таким образом можно нарисовать круг, используя только обводку. Для этого нужно указать радиус в 2 раза меньше, чем необходимый радиус сектора, и такую же толщину обводки. А уже долю видимой границы (визуально — сектор круга) легко регулировать через свойство stroke-dasharray:
document.querySelector('input').addEventListener('input',function()< var sector = document.querySelector('.sector'); //длина окружности по реальной границе. var strokeLength = sector.getTotalLength(); //Её можно рассчитать и через 2��r //var strokeLength = 2*Math.PI*sector.getAttribute('r'); var part = this.value, result = strokeLength/100*part; sector.style.strokeDasharray = result + ',' + strokeLength; >).border < fill: none; stroke: green; stroke-width: 1px; >.sector < fill: none; stroke: green; stroke-width: 50px; >label, span
Значение (%) Современное решение на css с коническим градиентом:
document.querySelector('input').addEventListener('input',function()< var chart = document.querySelector('.pie-chart'); chart.style.setProperty('--value',this.value + '%'); >).pie-chart < width: 150px; height: 150px; border-radius: 50%; --value: 30%; background: conic-gradient(green var(--value), transparent 0); >label, span
Значение (%)
Отслеживать
ответ дан 30 апр 2018 в 8:56
10.4k 2 2 золотых знака 14 14 серебряных знаков 36 36 бронзовых знаков
CSS и несколько фоновых градиентов
Вместо того, чтобы пытаться нарисовать зеленую часть, вы могли бы нарисовать белые части:
pie < border-radius: 50%; background-color: green; >.ten < background-image: /* 10% = 126deg = 90 + ( 360 * .1 ) */ linear-gradient(126deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%); >Ниже полный код:
pie < width: 5em; height: 5em; display: block; border-radius: 50%; background-color: green; border: 2px solid green; float: left; margin: 1em; >.ten < background-image: linear-gradient(126deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%); >.twentyfive < background-image: linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%); >.fifty < background-image: linear-gradient(90deg, white 50%, transparent 50%); >/* Slices greater than 50% require first gradient to be transparent -> green */ .seventyfive < background-image: linear-gradient(180deg, transparent 50%, green 50%), linear-gradient(90deg, white 50%, transparent 50%); >.onehundred
Scalable Vector Graphics
В этом варианте, вы можете добиться аналогичного эффекта с помощью элементов SVG и
Вышеприведенной код достаточно прямолинейнен. У нас есть элемент, содержащий круг и путь.
Центр окружности — 115×115 (создание элемента SVG 230×230 ). Круг имеет радиус 110 , что делает его диаметр 220 (оставляя границу 5 с обоих сторон).
Затем мы добавляем элемент , который является самой сложной частью этого примера. Этот элемент имеет один атрибут, который определяет, где и как нарисован путь. Он начинается со следующего значения:
Это указывает путь к началу в центре вышеупомянутого круга. Затем мы нарисуем линию из этого места в другое место:
Это рисует вертикальную линию от центра круга до вершины элемента (ну, пять пикселей сверху). Именно в этот момент все становится немного сложнее, но все же очень понятно.
Теперь мы нарисуем дугу из нашего текущего местоположения (115,5):
A110,110 1 0,1 190,35 z
Это создает нашу дугу и дает ей радиус, соответствующий нашему кругу (110). Два значения представляют x-радиус и y-радиус , и оба они равны, так как мы имеем дело с кругом. Следующий набор важных чисел — последний, 190,35 . Это говорит дуге, где нужно остановиться.
Что касается остальной информации (1 0,1 и z) , то они контролируют кривизну, направление и вывод самой дуги. Вы можете узнать больше о них, обратившись к любой ссылке в Интернете по SVG.
Чтобы выполнить slice другого размера, просто измените значение 190,35 , чтобы отразить больший или меньший набор координат. Вы можете обнаружить, что вам нужно создать вторую дугу, если вы хотите охватить более 180 градусов.
Если вы хотите определить координаты x и y с помощью угла, вы можете использовать следующие уравнения:
x = cx + r * cos(a) y = cy + r * sin(a) В приведенном выше примере при значении угла — 76 это будет:
x = 115 + 110 * cos(76) y = 115 + 110 * sin(76) Полученные значения : 205.676,177.272
Так же легко вы можете создать следующее:
circle < fill: #f1f1f1; stroke: green; stroke-width: 5; >path < fill: green; >svg.pie
Создание крестика в CSS [закрыт]
Вопросы с просьбами помочь с отладкой («почему этот код не работает?») должны включать желаемое поведение, конкретную проблему или ошибку и минимальный код для её воспроизведения прямо в вопросе. Вопросы без явного описания проблемы бесполезны для остальных посетителей. См. Как создать минимальный, самодостаточный и воспроизводимый пример.
Закрыт 2 года назад .
Мне нужно воссоздать крестик ( вот такой ) при помощи css
Отслеживать
задан 8 фев 2021 в 11:24
61 1 1 золотой знак 1 1 серебряный знак 5 5 бронзовых знаков
Мы готовы рассмотреть ваши попытки и подсказать.
8 фев 2021 в 11:27
1. Заинтайнить svg в background. 2. Сделать 2 пересекающихся наклонных градиента, но углы получатся острыми. Можно дорезать через clip-path или ещё 2 или 4 градиента. 3. Сделать горизонтальный и вертикальный градиенты и повернуть с помощью transform. 4. Вместо градиентов использовать 2 псевдоэлемента. 5. Если фон однотонный, закрашивать не линии, а треугольники. Впрочем, я не вижу причин так делать.
8 фев 2021 в 11:31
@Qwertiy: минусуют за лень и невежество. Не будет приложен код и/или описана конкретная проблема, то я тоже присоединюсь к минусующим.
Как нарисовать линию в css
При верстке страницы, иногда, возникает необходимость выделения заголовка или какого-то блока на странице горизонтальной линией. Например, вот так:
Навигация по статье:
Такую черту можно сделать несколькими способами. Сегодня мы рассмотрим вариант с добавлением горизонтальной линии HTML-тегом.
Специальный HTML-тег для задания горизонтальной линии
Итак, какой из тегов HTML рисует горизонтальную линию? Как это ни странно, в HTML для этой цели предусмотрен специальный тег
. Внешний вид такой линии зависит от заданных параметров.
В примере для
не задано никаких параметров визуализации и результат выглядит вот так:
Горизонтальная линия HTML
В данном случае для тега были применены параметры, прописанные в теме WordPress моего сайта. В вашем случае горизонтальная линия HTML может выглядеть по-другому.
Визуализация горизонтальной линия HTML с помощью атрибутов
Для тега
можно использовать специальные атрибуты, которые позволят задать необходимые параметры внешнего вида. Вот перечень доступных для использования атрибутов:
- align — выравнивание по горизонтали. Доступные значения: center, left, right. По умолчанию задано выравнивание по центру.
- color – цвет. Задается шестнадцатеричным числом или названием цвета.
- noshade — линия без трехмерных эффектов. Трехмерный эффект работает только в том случае если для линии не был задан цвет.
- size – толщина. Задается любым целым положительным числом. 0 задает толщину равную 1 пикселю.
- width – ширина. Можно задавать в пикселях или процентах.
Пример использования данных атрибутов:
Вот что получается:
Горизонтальная линия HTML
Стилизация горизонтальной линии HTML с помощью CSS
Так же для стилизации тега
вы можете использовать CSS-стили. Задавать визуальное оформление с помощью стилей целесообразно в том случае если у вас достаточно часто на странице используется тег
, так как это позволить существенно сократить размер кода страницы. Да и вообще, на мой взгляд, это удобнее.
Задать стили для тега
вы можете двумя способами:
- 1. В теле HTML-страницы перед закрытием тега при помощи тега
- 2. Прописать стили оформления в файле style.css
Для стилизации горизонтальной линии HTML вы можете использовать следующие CSS-стили:
- width – задание ширины в пикселях или процентах
- height – высота в пикселях
- background-color – цвет линий
- border – при помощи данного стиля можно задать обводку для линии
- border-radius – задает скругление углов
- margin – отступ элемента по верхнему, правому, нижнему и левому краю. Для выравнивания по центу необходимо задать значение auto.
- float – стиль задающий обтекание элемента. В данном случае можно использовать для выравнивания по левому или по правому краю.
Если вам нужно задать одинаковый стиль для всех тегов
на вашем сайте, то необходимо использовать следующий селектор:
Горизонтальные линии
В основном горизонтальные линии используются для декорирования HTML-страниц сайта, придавая им более привлекательный вид. Но также ими можно визуально разграничивать информацию соседних разделов, добавляя удобства читателям при ее изучении. В общем, рисуйте горизонтальные линии там, где вам нужно, вот и все.
Как нарисовать горизонтальную линию?
Для отрисовки горизонтальных линий в HTML существует специальный тег . Причем он является блочным тегом, то есть создает переносы строк до и после себя, поэтому линия всегда получается на отдельной строке. Соответственно и указывать его можно только внутри тегов, которые могут содержать блочные элементы, например или . А вот сам не может иметь содержимого, так как у него попросту нет закрывающего тега, то есть он является пустым .
Пример рисования горизонтальных линий в HTML
Результат в браузере
Как видите, линии получаются очень тонкими, невзрачными и рисуются во всю доступную ширину, поэтому сейчас мы научимся их изменять, чтобы они выглядели более привлекательно.
Как изменить цвет, толщину и ширину горизонтальных линий?
В старых версиях HTML у тега существовали специальные атрибуты, с помощью которых можно было изменить цвет, толщину и ширину горизонтальных линий. Это color , size и width , соответственно. Но в новых версиях от них отказались в пользу Каскадных таблиц стилей (CSS), поэтому, как вы уже догадались, мы опять будем использовать наш любимый атрибут style . Общий синтаксис такой:
— а можно указать сразу все параметры, только не забываем про точку с запятой (;).
Цвет можно указывать по его имени на английском или по HEX-коду цвета, перед которым ставится решетка (#). Ну, вы об этом уже знаете из урока по изменению цвета текста и фона.
А вот об изменении размеров мы поговорим подробнее. Как вы помните из урока по изменению шрифтов, в CSS существует около десяти единиц измерения, но ширину линии можно указывать только в пикселях (px) и процентах (%), а толщину вообще только в пикселях. Если вы поставите другие единицы измерения, то это не будет ошибкой, но браузеры их просто проигнорируют.
Если вы указываете размеры в пикселях, то толщина и ширина линии будет зависеть от разрешения монитора, на котором просматривают ваш сайт (чем выше разрешение экрана, тем тоньше и уже линия).
Как я уже сказал, только ширину линии можно указывать в процентах. Процентные размеры всегда зависят и высчитываются исходя из размеров родительского элемента-контейнера, внутри которого расположен тег . В этом случае размеры родителя берутся за 100%. Например, если мы разместим тег
внутри элемента , то как бы мы ни изменяли размеры окна браузера или разрешение монитора — ширина линии всегда будет составлять половину ширины блока .
Пример изменения цвета, толщины и ширины горизонтальных линий.
Результат в браузере
Изменение положения горизонтальных линий
Когда изменяешь ширину горизонтальной линии, то становится хорошо видно, что браузеры всегда располагают ее по центру. Если вы хотите изменить ее положение, то просто используйте внутри атрибут align со следующими значениями:
- center — линия выравнивается по центру (значение по умолчанию).
- left — прижимается к левому краю.
- right — прижимается к правому краю.
Пример выравнивания горизонтальных линий.
Результат в браузере
Как убрать рамку вокруг линии?
Посмотрите на самый первый пример этого урока. Как вы считаете, какой цвет у этих линий? А вот и неверно. Они прозрачные, как и любые элементы страницы, у которых не указан фоновый цвет! Не верите? Тогда посмотрите на пример, где мы изменяли цвет линий. У самой первой мы не установили цвет, а только увеличили ее размер и разве эта линия не прозрачная? Так-то!
Теперь объясню. По умолчанию браузеры рисуют вокруг линий рамки, которые создают эффект трехмерности. Так вот, когда мы не увеличиваем толщину горизонтальных линий, браузеры нам показывают только эти рамки, так как толщина самой линии составляет 0px.
Чтобы убрать рамку вокруг линии, которая чаще только портит внешний вид, мы снова применим атрибут style . А пишется это так:
3.1. Перенос строки и разделительная линия в HTML
Перевод строки, перенос строки, перенос на новую строку – это все об одном. В языке HTML перенос на новую строку применяется часто. Есть несколько путей: использовать тег
для перевода на новую строку, а можно использовать свойства CSS для переноса строки. Рассмотрим пример использования тега переноса строки:
В CSS перенос строки можно осуществить по-разному, например вот так:
Разделительная линия при помощи HTML или CSS
В HTML создать разделительную линию очень просто. Используется тоже непарный тег
— это и есть разделительная линия. Разделительная линия начинается с новой строки и после нее есть отступ. Вы можете управлять стилем горизонтальной линии, а так же можно сделать альтернативу ей. Далее пример разделительной линии при помощи тега:
А теперь давайте стилизуем (изменим стили, изменим внешний вид) нашу разделительную линию:
И создадим альтернативу нашей разделительной линии при помощи тега и CSS:
Кроссбраузерная HTML-линия
на CSS
По умолчанию линия, созданная с помощью элемента
, в разных браузерах отображается специфически, что может не очень хорошо сочетаться с дизайном сайта. Сделаем её кроссбраузерной да ещё такой, какой пожелаем .
Код ниже позволяет полностью управлять оформлением линии, а также её выравниванием по горизонтали:
border: 0; скрываем стандартную линию. border-bottom: 1px solid grey; рисуем свою линию с любыми характеристиками: толщина, вид, цвет. margin: auto; устанавливаем внешние отступы от линии, с помощью которых можно не только делать отбивки сверху и снизу, но и выравнивать линию по горизонтали: — выравнивание по центу; — выравнивание по левому краю; — выравнивание по правому краю. width: 50%; задаём ширину линии в 50% от ширины родителя.
Если нужна линия на всю ширину родительского элемента со стандартными отступами по вертикали, то свойства margin и width можно не указывать.
Пример «Кроссбраузерная линия»
Изображение вместо простой линии
Здесь всё просто: воспользуемся свойством border-image — СТОП! У этого свойства есть ограничения, которые заключается в том, что если для элемента установлено свойство border со значением 0 , то оно будет игнорироваться. Поэтому border-image не подходит, зато background работает «на ура»:
background: url( путь+к+изображению ); устанавливаем фоновое изображение в качестве линии. border: 0; скрываем стандартную линию. height: 10px; задаем толщину линии-изображения.
Пример «Изображение вместо простой линии»
Проверено в браузерах Google Chrome, Internet Explorer, Mozilla Firefox, Opera Next, Opera Presto и Safari. Отличился только Internet Explorer, который выравнивает линию с классом left не по левому краю, как все остальные браузеры, а по центру.
Похожие публикации:
- Как адаптировать изображение css
- Как в css выровнять картинку по центру блока div
- Как сделать текст больше в css
- Как сделать текст ниже css
Как сделать вертикальную черту в HTML
Поместите вокруг разметки в том месте, где должна располагаться следующая строка, и используйте CSS для ее стиля:
.verticalLine
some other content jacefarm 5 Янв 2017 в 09:20
Сочетание стиля с содержанием не является табу для многих.
Мне нечего сказать, и я говорю это
3 Апр 2013 в 03:40
Это действительно не табу, но разделение их удобно, так как тогда вы можете легко настроить в одном месте, если это необходимо. Кроме того, размещение его в отдельном файле CSS лучше для производительности, поскольку браузер может кэшировать его, и в конечном итоге вы будете передавать меньше байтов по сети каждый раз, когда запрашиваете отображаемый HTML.
Kris van der Mast
3 Апр 2013 в 19:28
Это один, но вы почти всегда получаете что-то вроде: ul.page_cp > li:not(:first-child) < .
2 Апр 2021 в 08:28
Вы можете использовать тег горизонтальной линейки для создания вертикальных линий.
Используя минимальную ширину и большой размер, горизонтальная линейка становится вертикальной.
Mr. Míng 4 Авг 2022 в 14:42
Браво, сэр. Это крутой трюк. По-прежнему нужно установить его на display:inline-block , иначе он не будет хорошо сидеть рядом с другими встроенными элементами.
8 Янв 2014 в 01:43
Однако я не думаю, что это работает в Firefox. Линия есть, но ее не видно.
21 Янв 2014 в 16:16
Спасибо за этот код. Вот рабочий пример jsfiddle этого jsfiddle.net/ccatto/c8RQc.
18 Июн 2014 в 00:20
Giulio, потому что он фактически не делит экран на две колонки. снова вам нужно использовать некоторый персонал css для желаемого результата, как и div.
Ismail Sahin
30 Ноя 2014 в 23:21
Мне это нравится больше, потому что это позволяет избежать странностей, связанных со скрытым div, только одна сторона которого имеет видимую границу. Конечно, это не то, как вы обычно используете hr, но для меня это все же имеет больше смысла.
12 Окт 2016 в 22:24
Вы можете использовать пустой , стилизованный точно так, как вы хотите, чтобы отображалась строка:
HTML:
С точной высотой (заменяющий стиль в строке):
div.vertical-line< width: 1px; /* Line width */ background-color: black; /* Line color */ height: 100%; /* Override in-line if you want specific height. */ float: left; /* Causes the line to float to left of content. You can instead use position:absolute or display:inline-block if this fits better with your design */ >
Если хотите, чтобы граница выглядела трехмерно, задайте стиль границы:
div.vertical-line < width: 0px; /* Use only border style */ height: 100%; float: left; border: 1px inset; /* This is default border style for
tag */ >
Конечно, вы также можете поэкспериментировать с расширенными комбинациями:
div.vertical-line
Peter G 12 Июл 2018 в 08:36
Вы также можете создать вертикальную линию, используя горизонтальную линию HTML
html, body hr.vertical < width: 0px; height: 100%; /* or height in PX */ >miller 24 Сен 2018 в 23:07
Отличный трюк, чтобы сделать линию такой же, как стандартная
. Возможно, также потребуется дополнительный стиль, чтобы плавать рядом с контентом (пример: float:left; )
30 Июл 2013 в 13:00
Это «вертикальное» правило по-прежнему разделяет (текстовые) элементы по вертикали, как обычное горизонтальное правило.
30 Ноя 2017 в 11:34
#your_col
Your content here miller 24 Сен 2018 в 20:21
HTML5 пользовательские элементы (или чистый CSS)
1. JavaScript
Зарегистрируйте свой элемент.
var vr = document.registerElement('v-r'); // vertical rule please, yes! * — является обязательным для всех пользовательских элементов.
2. css
* Возможно, вам придется немного повозиться с display:inline-block|inline , потому что inline не расширяется до высоты элемента. Используйте поле для центрирования линии внутри контейнера.
3. создать экземпляр
js: document.body.appendChild(new vr()); or HTML: * К сожалению, вы не можете создавать собственные самозакрывающиеся теги.
Применение
THIS WORKS
Не хотите связываться с javascript?
Просто примените этот класс CSS к назначенному элементу.
Css
* См. примечания выше.
Community 20 Июн 2020 в 12:12
Грустно из-за ограничений, но это выглядит очень, очень полезным в некоторых других местах.
9 Июн 2016 в 14:07
Он не заполняет весь размер div, как исправить?
Otávio Barreto
27 Апр 2017 в 22:30
Возможно, вам придется повозиться с закомментированным свойством display . Установите его на inline или inline-block . См. примечания выше и пример URL.
28 Апр 2017 в 11:00
Еще один вариант — использовать изображение размером 1 пиксель и установить высоту — этот вариант позволит вам переместить его туда, где вам нужно.
Но не самое элегантное решение.
chris 30 Июн 2010 в 21:40
Вы можете нарисовать вертикальную линию, просто используя высоту / ширину с любым элементом html.
#verticle-line
miller 25 Сен 2018 в 03:02
Для горизонтальной линии есть тег
. Его также можно использовать с CSS для создания горизонтальной линии:
.divider
Свойство width определяет толщину линии. Свойство height определяет длину линии. Свойство background-color определяет цвет линии.
Muminur Rahman 21 Апр 2020 в 18:33
В HTML нет тега для создания вертикальной линии.
- Метод: вы загружаете линейное изображение. Затем вы устанавливаете его стиль как «height: 100px ; width: 2px»
- Метод: вы можете использовать теги
X
onurbaysan 30 Июн 2010 в 14:54
Чтобы создать вертикальную линию с центром внутри div, я думаю, вы можете использовать этот код. Полагаю, «контейнер» может иметь 100% ширину.
div.container < width: 400px; >div.vertical-line
miller 24 Сен 2018 в 18:54
Лучший ответ, все остальные застряли слева или справа. Спасибо!
Abdelhadi Lahlou
1 Мар 2019 в 12:16
Вы можете использовать тег hr (горизонтальная линия), а затем повернуть его на 90 градусов с помощью CSS ниже
Hayk Aghabekyan 5 Сен 2014 в 02:59
Это сломает любой текст или элементы, стоящие рядом.
8 Дек 2016 в 12:28
Я использовал комбинацию предложенного кода «hr», и вот как выглядит мой код:
Я просто изменил значение «левого» пикселя, чтобы расположить его. (Я использовал вертикальную линию, чтобы выровнять контент на своей веб-странице, а затем удалил ее.)
MSeifert 28 Мар 2018 в 17:26
Вертикальная линия справа от div
- Empty div didn’t shows line
- Vertical line length depends on the content in the div
- Here I am using inline style. You can replace it by external style or internal style.
Вертикальная линия слева от div
- Empty div didn’t shows line
- Vertical line length depends on the content in the div
- Here I am using inline style. You can replace it by external style or internal style.
pvrforpranavvr 27 Апр 2018 в 14:50
Поверните
на 90 градусов:
MeKoo Solutions 6 Июл 2019 в 14:35
Почему бы не использовать & # 124, специальный символ HTML для |
Lance Caraccioli 29 Апр 2013 в 21:30
Потому что это не вертикальная линия
22 Авг 2016 в 23:47
Возможен еще один подход: использование SVG .
- У вас может быть леска любой длины и ориентации.
- Вы можете легко указать ширину, цвет
- SVG теперь поддерживается в большинстве современных браузеров. Но некоторые старые браузеры (например, IE 8 и старше) его не поддерживают.
Sachin 16 Фев 2016 в 22:18
Если ваша цель — разместить в контейнере вертикальные линии для разделения расположенных бок о бок дочерних элементов (элементов столбцов), вы можете подумать о стилизации контейнера следующим образом:
.container > *:not(:first-child)
Это добавляет левую границу ко всем дочерним элементам, начиная со 2-го дочернего элемента. Другими словами, вы получаете вертикальные границы между соседними дочерними элементами.
- > — дочерний селектор. Он соответствует любому дочернему элементу элемента (ов), указанного слева.
- * — универсальный селектор. Соответствует элементу любого типа.
- :not(:first-child) означает, что это не первый дочерний элемент своего родителя.
Я думаю, что это лучше, чем простое правило .child-except-first , потому что имеет больше смысла иметь вертикальные линии из правил контейнера, а не из правил различных дочерних элементов.
Будет ли это лучше, чем использование импровизированного элемента вертикальной линейки (путем стилизации горизонтальной линейки и т. Д.), Будет зависеть от вашего варианта использования, но, по крайней мере, это альтернатива.
S. Kirby 2 Янв 2016 в 05:26
Чтобы добавить вертикальную линию, вам нужно стилизовать hr.
Теперь, когда вы сделаете вертикальную линию, она появится посередине страницы:
Теперь, чтобы разместить его там, где вы хотите, вы можете использовать этот код:
Это расположит его слева, вы можете перевернуть его, чтобы расположить справа.
MSeifert 28 Мар 2018 в 17:28
В элементе Previous, после которого вы хотите применить вертикальную строку, вы можете установить CSS .
border-right-width: thin; border-right-color: black; border-right-style: solid; Abhishek Mathur 23 Мар 2016 в 11:32
Просто используйте любой из разных символов UTF-8.