Как нарисовать линию css
Перейти к содержимому

Как нарисовать линию css

  • автор:

Как нарисовать линию с помощью html/css?

5dc2c596e5201890280985.png

У меня есть шаблон PSD, и мне нужно преобразовать его в HTML / CSS. Я не понимаю, как нарисовать эту линию (линия от космического корабля до кнопки)? Можно добавить линию с помощью CSS (с точкой на одном конце, изгибом и градиентом)? Или добавить эту линию к фону в графическом редакторе (но это будет проблемой для адаптивного дизайна)?

  • Вопрос задан более трёх лет назад
  • 588 просмотров

3 комментария

Простой 3 комментария

Нарисовать линию в 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

 

Title

Отслеживать
4,572 3 3 золотых знака 17 17 серебряных знаков 53 53 бронзовых знака
задан 14 ноя 2018 в 18:09
143 1 1 золотой знак 1 1 серебряный знак 12 12 бронзовых знаков
15 ноя 2018 в 9:22

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

Заголовок

Отслеживать
ответ дан 14 ноя 2018 в 19:18
123k 24 24 золотых знака 127 127 серебряных знаков 305 305 бронзовых знаков

При чём тут 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
 

Title

Отслеживать
ответ дан 14 ноя 2018 в 18:39
10.4k 2 2 золотых знака 15 15 серебряных знаков 36 36 бронзовых знаков

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; /* толще, чтобы компенсировать трансформацию */ >

Текст

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

Горизонтальная линия css, как сделать правильнее (красивее)?

Приветствую, видел много решений при создании вертикальной линии, от тега


до canvas (js).
Какой будет проще всё таки и лучше?
В html book тег


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

  • Вопрос задан более трёх лет назад
  • 18848 просмотров

5 комментариев

Оценить 5 комментариев

Алексей Уколов @alexey-m-ukolov Куратор тега CSS
Так вертикальная линия или горизонтальная?

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS
Алексей Уколов: Кто сказал что тег устаревший? Я что-то пропустил?

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS
Это я автору вопроса
DmitryRise @DmitryRise Автор вопроса
Сергей: ок, тег не устаревший. Ошибочка вышла.
DmitryRise @DmitryRise Автор вопроса
Алексей Уколов: горизонтальая
Решения вопроса 1
Алексей Уколов @alexey-m-ukolov Куратор тега CSS

Проблема с тегом


в том, что линия — это не контент, а дизайн. Соответственно, идеально, если дизайн рисуется при помощи css. А уж как конкретно рисовать линию зависит от разметки и дизайна конкретной страницы. Это может быть банальная граница, может быть box-shadow, могут быть псевдоэлементы с фоновой заливкой. Любой из перечисленных вариантов адекватен и имеет право на существование.

P.S. Что-то не вижу, чтобы тег был объявлен устаревшим. Все атрибуты его порезали, но в спеке HTML5 он есть.

Нарисовать линию по 2 точкам

Author24 — интернет-сервис помощи студентам

Нарисовать ломанную линию с закругленными углами
надо средствами css/html нарисовать ломанную линию с закругленными углами. Дожно получиьтся как.

Как адаптивно нарисовать линию напротив картинок
Как можно адаптивно на флекс нарисовать линию напротив картинок? <div <div.

Подскажите, пожалуйста, как правильно нарисовать такую линию в css?
Пробовал эту линию через <hr> , но что то не выходило по центру сделать. Да и думаю, так сейчас не.

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

Эксперт HTML/CSS

653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374

canvas id="canvas">/canvas>
1 2 3 4 5 6 7 8 9 10 11
function line(x, y, x1, y1){ var example = document.getElementById("canvas"), ctx = example.getContext('2d'); example.height = 200; example.width = 200; ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x1, y1); ctx.stroke(); } line(3, 10, 25, 50);

40 / 36 / 15
Регистрация: 22.03.2013
Сообщений: 293

Shakalaka, canvas не подходит. Он выделяет под него выделяется некий участок экрана и все другие элементы у меня находятся в не этого холста.
Попробую более подробно рассказать.
Имею некоторый объект например круг. После нажатия мыши и пока мышь зажата считаются координаты, как только мышь отпущена и координаты запоминаются. Все точки я запомнил. Осталось провести прямую. Если я буду использовать canvas, то получается, что у меня линия начинается из-за пределов холста до определенной точки причем эта точка тоже за холстом находится. Объект поместить в canvas не могу. Он просто исчезает.

Эксперт HTML/CSS

653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374

HTML, CSS язык разметки, на нем нельзя что-то рисовать. Для этого и есть JS и канвас. Тот же условный круг, можно тоже нарисовать в канвасе, повесить обработчик событий onmouedown, onmouseup на канвас, получать свои координаты и потом рисовать линию, канвас можно абсолютно позиционировать и поставить в том месте страницы, где нужно.

Добавлено через 40 минут
Вот примерчик накидал

87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Как нарисовать линию по точкам?
почему алгоритм брезенхэма с ошибками в википедии и как всетаки нарисовать линию по точкам?

Нарисовать линию в пространстве по заданным точкам
Есть функции x(t), y(t), z(t). По ним нужно нарисовать линию для t=(t0,t1)

Нарисовать замкнутую ломаную линию по точкам, над каждым отрезком вывести длину
В общем этот код всегда на выходе выдает 1. Я не могу понять почему. Этот фрагмент кода выводит над.

Нарисовать линию по «вещественным» точкам
Здравствуйте, форумчане. Помогите решить задачу: есть массив данных (долгота, широта, время), все.

Или воспользуйтесь поиском по форуму:

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *