Нарисовать линию в 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,542 3 3 золотых знака 16 16 серебряных знаков 53 53 бронзовых знака
задан 14 ноя 2018 в 18:09
133 1 1 золотой знак 1 1 серебряный знак 11 11 бронзовых знаков
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
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
При чём тут 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 золотых знака 14 14 серебряных знаков 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?
Можно ли сделать такую пунктирную линию , как в примере только средствами css, или проще сделать картинкой? Интересует именно какой то оправданный способ, к примеру делать её дивами не хочу.
Отслеживать
47.8k 17 17 золотых знаков 56 56 серебряных знаков 100 100 бронзовых знаков
задан 13 мая 2016 в 6:56
Dementiy1999 Dementiy1999
928 2 2 золотых знака 15 15 серебряных знаков 40 40 бронзовых знаков
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
hr < border:none; border-top:1px dotted #f00; color:#fff; background-color:#fff; height:1px; width:100%; >hr.ex2
string
string2
string3Смотрите также Styling
with CSS
Отслеживать
ответ дан 13 мая 2016 в 7:02
Алексей Шиманский Алексей Шиманский
71.2k 12 12 золотых знаков 91 91 серебряный знак 180 180 бронзовых знаков
так это просто точки .
13 мая 2016 в 7:38
@Sergey ну да, как у вас в примере, приведенный в вопросе
13 мая 2016 в 7:39
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как нарисовать линию с помощью html/css?
У меня есть шаблон PSD, и мне нужно преобразовать его в HTML / CSS. Я не понимаю, как нарисовать эту линию (линия от космического корабля до кнопки)? Можно добавить линию с помощью CSS (с точкой на одном конце, изгибом и градиентом)? Или добавить эту линию к фону в графическом редакторе (но это будет проблемой для адаптивного дизайна)?
- Вопрос задан более трёх лет назад
- 585 просмотров
3 комментария
Простой 3 комментария
Как нарисовать линию по двум точкам?
d =
Не понимаю, как динамично через css или js рисовать линию между двумя координатами
Я написал код, с помощью которого собираюсь две точки соединять линией. Xочу от x1 y1 к x2 y2 нарисовать линии, я уже получил эти точки, но вообще не представляю как через точки рисовать линии.
let items = document.querySelectorAll('.item'); let reqAnimFrame = (function() < return requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || oRequestAnimationFrame || msRequestAnimationFrame || function(callback) < setTimeout(callback, 1000 / 60); >>)(); function animate() < let start = performance.now(); reqAnimFrame(function animate(time) < // timeFraction изменяется от 0 до 1 let timeFraction = (time - start) / duration; if (timeFraction >1) timeFraction = 1; // вычисление текущего состояния анимации let progress = timing(timeFraction); draw(progress); // отрисовать её if (timeFraction < 1) < requestAnimationFrame(animate); >>); > function createPath(from, to) < function elemPosition(elem) < let pos = < top: window.pageYOffset + elem.getBoundingClientRect().top, left: window.pageXOffset + elem.getBoundingClientRect().left, right: window.pageXOffset + elem.getBoundingClientRect().right, bottom: window.pageYOffset + elem.getBoundingClientRect().bottom >; return pos; > function centerElem(elem) < let width = elem.offsetWidth; let height = elem.offsetHeight; let centerX = width/2 + elemPosition(elem).left; let centerY = height/2 + elemPosition(elem).top; let pos = < y: centerY, x: centerX >; return pos; > function render(childF, childT) < let div = document.createElement('div'); div.classList.add('harmony'); document.body.append(div); let start = < x: centerElem(childF).x, y: elemPosition(childF).bottom >; let final = < x: centerElem(childT).x, y: elemPosition(childT).top >; /*console.log(start.x, start.y); console.log(final.x, final.y);*/ let d = Math.sqrt( Math.pow((final.x - start.x), 2) + Math.pow((final.y - start.y), 2) ); /*console.log(d);*/ /*animate(); Тут я собираюсь делать анимацию */ > let childFrom = from.children[0]; let childTo = to.children[0]; centerElem(childFrom); render(childFrom, childTo); > window.addEventListener('load', () => < createPath(items[0], items[4]); >);@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); *, *:before, *:after < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; >body < margin: 0; color: black; font-size: 16px; font-family: 'Open Sans', sans-serif; >img < display: block; max-width: 100%; height: auto; >.wrapper < max-width: 1400px; margin: 0 auto; >.line:not(:first-child) < margin-top: 50px; >.item < display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex: 1; >.item:not(:last-child) < margin-right: 2%; >.item__img < z-index: 2; >.item__img:not(:first-child) < margin-left: 5px; >.line < display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; transition: opacity .3s ease-in-out; >.harmony
Отслеживать
Михаил Камахин
задан 10 янв 2020 в 19:47
Михаил Камахин Михаил Камахин
8,672 2 2 золотых знака 16 16 серебряных знаков 55 55 бронзовых знаков
при помощи svg, например
10 янв 2020 в 19:53Попробуй через canvas . Вот небольшой урок по фигурам и линиям — habr.com/ru/post/111308 . Надеюсь помог
10 янв 2020 в 19:55
Я не понимаю как с помощью JS отрисовывать блок по точкам, я знаю, что в canvas есть перо, и там просто можно переставить перо, написать рисовать от точки к точке и будет нарисована линия. Но в моей задаче я взаимодействую с DOM динамическим способом
10 янв 2020 в 20:00
ru.stackoverflow.com/questions/704408/… похожее задание.
10 янв 2020 в 20:04@AlexDevTime там известны координаты плюс минус и в процентах можно указать. Я хочу сделать функцию — ты ей передал две точки, она отрисовала линию между ними. Точки то известны у меня, а как направление указать?
10 янв 2020 в 20:12
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Чтобы нарисовать линию, нужно понять, под каким углом она пойдёт.
Формула тангенса ниже основывается на том, что мы из векторов длин вычитаем коорд другой точки, без разницы какой
Тангенс угла равен = (y2-y1) / (x2-x1) , где x1 y1 и x2 y2 две точки
Зная тангенс угла, мы можем посчитать сам угол
Мы имеем tgx = альфа , где альфа — угол
Формула: альфа = arctg(x) + 2*Pi*n , где n — целые числа, а Pi — число Пи
Так как нам не нужен угол в несколько оборотов, берём самый первый угол при n = 0 , т.е.
Формула будет выглядеть так:
альфа = arctg(x)
Мы нашли чему будет равен угол, но значение в радианах, чтобы перевести из радиан в градусы, нужно значение радиан умножить на 180 и разделить всё на число Пи, вот формула:
xРадиан = (x*180)/Пи
Получается, что формула для нахождения угла по двум точкам будет выглядеть так:arctg( (y2-y1) / (x2-x1) ) * 180 / Pi
Или на JS, вот так:
Math.atan( (y2-y1) / (x2-x1) ) * 180 / Math.PIТакже, если просто попробовать повернуть линию под полученным углом, ничего не получится. Почему? Потому что угол будет поворачиваться не оттуда, так как эти вычисления для обычной математической окружности. На изображении я указал четверти круга и где положителен тангенс в этих четвертях. Это математическая окружность
Необходимо понять, как располагается окружность. Если прямой из браузера задать 0 градусов и начать поворачивать, то будет видно, откуда начинается поворот.
Путем детской смекалки и 2-х раз перерисований линий в painte(для меня) можно понять, что ось стоит вот так(по которой в браузере поворачивается линия):Получается, что у нас ось повернулась на минус 90 градусов(по математически) и отразилась зеркально относительно 1,2 и 3,4 четвертей. И на основании того, что в 1,2 четвертях тангенс положительный, а в 3,4 отрицательный можно понять, что нам это нужно как-то отнести к углу.
Я ещё не понял, как я это придумал, но я записал это в таком виде:
tang — тангенс, angle — это угол.if (tang < 0) < angle = 90 + angle; >else if (tang > 0)Если вы понимаете, почему я так записал, и почему это работает — напишите, пожалуйста, в комментариях
Я сделал такую штуку, которая рисует от середины изображения к другой середине изображения линии, можно посмотреть, при клике по документу, анимация начинается заново:
let items = document.querySelectorAll('.item'); let reqAnimFrame = (function() < return requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || oRequestAnimationFrame || msRequestAnimationFrame || function(callback) < setTimeout(callback, 1000 / 60); >>)(); function animate(< timing, draw, duration >) < let start = performance.now(); reqAnimFrame(function animate(time) < // timeFraction изменяется от 0 до 1 let timeFraction = (time - start) / duration; if (timeFraction >1) timeFraction = 1; // вычисление текущего состояния анимации let progress = timing(timeFraction); draw(progress); // отрисовать её if (timeFraction < 1) < reqAnimFrame(animate); >>); > function elemPosition(elem) < let pos = < top: window.pageYOffset + elem.getBoundingClientRect().top, left: window.pageXOffset + elem.getBoundingClientRect().left, right: window.pageXOffset + elem.getBoundingClientRect().right, bottom: window.pageYOffset + elem.getBoundingClientRect().bottom >; return pos; > function centerElem(elem) < let width = elem.offsetWidth; let height = elem.offsetHeight; let centerX = width / 2 + elemPosition(elem).left; let centerY = height / 2 + elemPosition(elem).top; let pos = < y: centerY, x: centerX >; return pos; > function whatElems(from, fromIndex, to, toIndex) < let child = < from: from.children[fromIndex], to: to.children[toIndex] >return child; > function createDiv() < let div = document.createElement('div'); div.classList.add('harmony'); document.body.append(div); return div; >function render(childF, childT, elemResize, j) < let div = elemResize; if (elemResize == undefined) < div = createDiv(); >let height = window.getComputedStyle(div, null).height; // исходная высота прямой height = Number(height.slice(0, height.length - 2)); // исходная высота прямой let d, tang, arctg, angle, scale, final, start; function logic() < final = < x: centerElem(childT).x, y: elemPosition(childT).top >; // координаты конечной точки start = < x: centerElem(childF).x, y: elemPosition(childF).bottom >; // координаты начальной точки d = Math.sqrt(Math.pow((final.x - start.x), 2) + Math.pow((final.y - start.y), 2)); // длина прямой после анимации tang = (final.y - start.y) / (final.x - start.x) // Тангенс arctg = Math.atan(tang); // Арктангенс angle = arctg * 180 / Math.PI; // угол в градусах scale = d / height; // насколько масштабировать прямую по высоте if (tang < 0) < angle = 90 + angle; >else if (tang > 0) < angle = -(90 - angle); >> logic(); if (elemResize !== undefined) < if (progressGlobal[j + 1] == 1) < reqAnimFrame(startResize); >function startResize() < div.style.transform = `translate($px, $px) rotate($deg) scale(1, $) translateZ(0)`; > > else < animate(< duration: 5000, timing(timeFraction) < return timeFraction; >, draw(progress) < logic(); div.style.transform = `translate($px, $px) rotate($deg) scale(1, $) translateZ(0)`; progressGlobal[j] = progress; > >); > > function createPath(from, fromIndex, to, toIndex, j) < let child = whatElems(from, fromIndex, to, toIndex); let childFrom = child.from; let childTo = child.to; render(childFrom, childTo, undefined, j); >let progressGlobal = []; let harmonies; let paths = []; function startHell() < function createPathAndPush(from, fromIndex, to, toIndex, j) < createPath(from, fromIndex, to, toIndex, j); paths.push([from, fromIndex, to, toIndex, j]); j++; return j; >let j = 0; for (let i = 3; i for (let i = 6; i harmonies = document.querySelectorAll('.harmony'); for (let i = 0; i < harmonies.length; i++) < progressGlobal[i] = 0; >> window.addEventListener('load', () => < startHell(); >); window.addEventListener('resize', () => < for (let i = 0; i < harmonies.length; i++) < let child = whatElems(paths[i][0], paths[i][1], paths[i][2], paths[i][3]); let childFrom = child.from; let childTo = child.to; render(childFrom, childTo, harmonies[i], i - 1); >>); window.addEventListener('click', () => < for (let i = 0; i < harmonies.length; i++) < harmonies[i].remove(); >startHell(); >);@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap'); *, *:before, *:after < -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; >body < margin: 0; color: black; font-size: 16px; font-family: 'Open Sans', sans-serif; >img < display: block; max-width: 100%; height: auto; >.wrapper < max-width: 1400px; margin: 0 auto; >.line:not(:first-child) < margin-top: 50px; >.item < display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; flex: 1; >.item:not(:last-child) < margin-right: 2%; >.item__img < z-index: 2; >.item__img:not(:first-child) < margin-left: 5px; >.line < display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; transition: opacity .3s ease-in-out; >.harmonyПредыдущая запись