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

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

  • автор:

SVG контур

В качестве данных контура используются следующие команды:

  • M = переместить указатель
  • L = нарисовать линию
  • H = нарисовать горизонтальную линию
  • V = нарисовать вертикальную линию
  • C = нарисовать кубическую кривую Безье с двумя контрольными точками
  • S = нарисовать сглаженную кубическую кривую Безье с одной контрольной точкой
  • Q = нарисовать квадратичную кривую Безье с одной контрольной точкой
  • T = нарисовать сглаженную квадратичную кривую Безье. Контрольной точкой будет отражение контрольной точки предыдущей команды.
  • A = нарисовать эллиптическую кривую
  • Z = закрыть контур

Примечание: Все вышеприведенные команды имеют вариант записи в нижнем регистре. Если команда записана большими буквами, то позиционирование будет абсолютным. Если маленькими буквами, то позиционирование будет относительным.

Пример №1

В следующем примере определяется контур, который начинается в координатах (150,0), затем проводится линия в координаты (75,200), затем проводится линия в координаты (225,200) и, наконец, контур закрывается в начальных координатах (150,0):

Ваш браузер не поддерживает HTML тег SVG.

Пример №2

Кривые Безье используются для моделирования плавных кривых линий, масштаб которых можно бесконечно увеличивать или уменьшать. Обычно, выбирается две конечных точных точки и одну или две контрольных. Кривую Безье с одной контрольной точкой называют квадратичной кривой Безье, а с двумя контрольными точками — кубической.

В следующем примере создается кубическая кривая Безье. Здесь A и C — соответственно начальная и конечная точки, B — контрольная точка:

Ваш браузер не поддерживает HTML тег SVG.

             A B C   

Сложно? ДА. Именно из-за сложности при рисовании контуров и рекомендуется использовать специальный SVG редактор для создания сложной графики.

Как css сделать кривые линии, без помех?

Добрый день. Возник вопрос сделать кривые линии между элементами, типа как пошаговая инструкция или пошаговые действия. В общем, я нашел стать. как можно сделать это через псевдо элементы с помощью border-top, border-left и т.д.

Все более менее хорошо, но:

1) Есть ли нормальный метод ? с помощью css
2) Как убрать мусор полу невидимой линии других сторон?
— Если спрятать за элемент, то вроде бы норм, а если эти линии не за элементом, то кажется, что на экране пыль, мусор, т.е. бросается в глаза все это.

5da486434b327150657829.png

Вот код которым я пользовался

display: block; content: ''; height: 62%; width: 70%; border-top: 2px dashed #393d50; border-left: 2px dashed #393d50; -webkit-border-radius: 210px 0 0 0; -moz-border-radius: 210px 0 0 0; border-radius: 210px 0 0 0; position: absolute; right: -126px; top: 125px; transform: rotate(200deg);
  • Вопрос задан более трёх лет назад
  • 469 просмотров

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

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

Кривые(скругленные) линии border

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

Кривые линии у кнопок
Почему линии у кнопок выглядят так коряво (ступенями)? Необходимо использовать сглаживание или.

Нестандартные линии border
Как нарисовать адаптивные линии с точками, которые на картинке снизу.

Кривые линии внутри круга
Здравствуйте, недавно начал заниматься всём что связано в web-программирование. И тут нашёл чем.

Как изображать кривые и ломаные линии?
Создайте приложение в среде Delphi, позволяющее изображать кривые линии и ломаные линии. Как это.

Создать кривые линии на равном расстоянии при адаптирующемся экране
Здравствуйте! Можно ли создать кривые линии, как на первом скриншоте(приблизительно) под цифрами.

3318 / 1217 / 413
Регистрация: 24.07.2016
Сообщений: 1,818

ЦитатаСообщение от Kerduk Посмотреть сообщение

Как нарисовать адаптивные линии с точками, которые на картинке снизу.
В paint -е думаю можно нарисовать.
Заблокирован

Первое, что пришло в голову.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41
.wrapper { display: block; position: relative; min-width: 60px; height: 30px; margin-right: 30px; border-bottom: 3px solid #000; border-left: 3px solid #000; border-radius: 0px 0px 0px 30px; } .wrapper2 { display: block; position: relative; min-width: 60px; height: 30px; border-top: 3px solid #000; border-right: 3px solid #000; border-radius: 0px 30px 0px 0px; margin-left: 30px; margin-top: -3px; } .bubble { display: block; position: absolute; left: -6.5px; top: -5px; width: 10px; height: 10px; background-color: #d00; border-radius: 50%; } .bubble2 { display: block; position: absolute; width: 10px; height: 10px; right: -6.5px; bottom: -5px; background-color: #00d; border-radius: 50%; }
div class="wrapper">div class="bubble">/div>/div> div class="wrapper2">div class="bubble2">/div>/div>

Как верстаются такие линии?

введите сюда описание изображения

Можно наложить background -ом и потом абсолютное позиционирование, либо есть другой, быстрый и правильный метод?

Отслеживать
4,572 3 3 золотых знака 17 17 серебряных знаков 53 53 бронзовых знака
задан 19 фев 2018 в 10:39
user281117 user281117
241 2 2 серебряных знака 9 9 бронзовых знаков
SVG — самый внятный вариант
19 фев 2018 в 10:44
хорошо, а элементы как спозиционировать посоветуете ?
19 фев 2018 в 10:45

Тоже SVG . так как css-ом добиться такого и качества и результата, если только на каждый пиксель прописывать медиа

19 фев 2018 в 10:49

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

19 фев 2018 в 10:55

@user281117 у вас есть картинка фона одной кривой без прямоугольников? Если нет, то свяжитесь со своим дизайнером и попросите его переслать требуемую картинку. Я думаю это будет не трудно для него сохранить соответствующий слой. Если конечно он сам рисовал, а не позаимствовал где-нибудь. Имея такую картинку задача будет решена, хоть в css, но лучше в svg

19 фев 2018 в 15:53

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

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

Идеальный вариант, когда дизайнер даёт исходные данные в векторном формате, но если это растровая картинка, то можно воспользоваться следующей техникой:

  • Загружаем растровую картинку в векторный редактор с помощью нескольких строчек svg. Это нужно, чтобы точно позиционировать положение векторных элементов относительно растрового фона.
  • Нам необходимо получить формулу path которая точно повторяет форму кривой на растровом изображении. Для этого в векторном редакторе с помощью инструмента — «рисовать кривые Безье» добавляем узловые точки вдоль кривой и двигая рычагами узловых точек, добиваемся точного совпадения нашего path с кривой на растровой картинке.
  • Сохраняем файл и копируем из него формулу path кривой.
  • Далее создаем заготовки баннеров и помещаем их в секцию для дальнейшего многократного использования
  • Вызываем баннер из хранилища и позиционируем его относительно кривой:
  • Размещаем текст в баннере

.Такая техника может быть освоена начинающими изучение SVG.
Она немного трудоемка, но дает неоспоримые преимущества перед CSS

  1. Кривые в CSS offset-path поддерживает только экспериментальная технология Chrome
    В svg кривые поддерживают все современный браузеры плюс IE .
  2. Если будет необходимость, то легко заменить одну форму баннера на другую.
  3. Можно менять форму кривой, без нарушения верстки.
  4. Приложение полностью адаптивно и верстка никогда не сломается при изменении размера дисплея гаджета.
                            Ноябрь 2017 Запуск проекта Декабрь 2017 Инвестиции Январь 2018 Февраль 2018 Март 2018 Апрель 2018 Май 2018 Июнь 2018 Июль 2018 Август 2018 Сентябрь 2018 Октябрь 2018 Ноябрь 2018 Окончательный выбор Декабрь 2018 Финишные работы  

Отслеживать
ответ дан 12 мая 2018 в 11:29
Alexandr_TT Alexandr_TT
110k 23 23 золотых знака 114 114 серебряных знаков 382 382 бронзовых знака

CSS свойство offset-path — путь кривой, по которой располагаются элементы (SVG-формат), offset-distance — расстояние от начала кривой в процентах. Если нужно блоки выровнять горизонтально — в руки Вам геометрия, JS и transform-rotate )))

body < background-color: #333; padding: 0 4em; width: 100%; >svg, .box < position: absolute; >.box < height: 50px; width: 50px; offset-path: path("M0,380 C9.32293455,260.130586 35.1510596,182.38319 77.484375,146.757812 C140.984348,93.3197459 266.91385,262.809311 332.683594,240.753906 C398.453337,218.698502 450.023437,1.28465307 450.023437,1.28465307"); >.one < background-color: red; offset-distance:15%; >.two < background-color: green; offset-distance:50%; >.three

Отслеживать
ответ дан 11 мая 2018 в 14:40
739 5 5 серебряных знаков 9 9 бронзовых знаков
Крутое решение, не знал об offset-path, лови плюс=)
11 мая 2018 в 14:42
Только вот незадача, без адаптивности это работает корректно=))
11 мая 2018 в 14:44
@Arthur, по моему это адаптивное решение. path ведь можно подстроить под людой экран
11 мая 2018 в 14:46
Убери width & height из svg и попробуй, почему-то смещаются квадраты
11 мая 2018 в 14:47
@Arthur, согласен. Не адаптивно совсем)
11 мая 2018 в 14:54

CSS — он в изначально «заквадраченный», рисует прямые линии и прямоугольники. Можно скругляться углы и получать из бордеров изогнутые линии — но в этом именно случае извращаться не стоит.

.timeline < position: relative; margin: 20px; background-color: #172238; >.timeline__back < display: block; width: 100%; height: auto; >.timeline__info < margin: 0; padding: 0; list-style: none; >.timeline__item < position: absolute; width: 180px; padding: 15px; margin-top: -35px; color: #fff; text-align: center; font-family: sans-serif; font-size: 14px; line-height: 20px; background-color: #1e2b4b; transform: translate(-50%, -100%); transform-origin: 50% 100%; >.timeline__item:before, .timeline__item:after < content: ""; display: block; position: absolute; top: 100%; left: 50%; >.timeline__item:before < height: 30px; width: 1px; background-color: #52789c; >.timeline__item:after < height: 7px; width: 7px; margin: 30px 0 0 -4px; background-color: #172238; border: 1px solid #52789c; border-radius: 50%; >.timeline__item strong < display: block; >.timeline__item--01 < top: 49%; left: 50%; >.timeline__item--02 < top: 33%; left: 80%; >.timeline__item--03
    Январь 2017Lorem ipsum dolor sit amet consectetur Январь 2017Lorem ipsum dolor sit amet consectetur, adipisicing elit magnam, numquam Январь 2017Lorem ipsum dolor sit amet consectetur

Сделайте так:

0) Делаем div-враппер, позишн = релатив, фон — синий.

1) В него кладем именно картинкой (не фоном) кривую линию — в .svg (дисплей = блок, ширина = 100%, высота = авто) Почему не фоном? потому что картинка будет распирать враппер по ширине и задавать высоту, будет удобно «резиниться».

2) Также добавляете во враппер список ul (позишн = статик) и в него — уже li (позишн = абсолют) с текстами. У каждого li будет два класса — первый, пусть .timeline__item (ширина, рамка, фон, цвет текста — один для всех li), и второй, который у всех разный — отвечает за положение каждого во враппере .timeline__item—01 (left: 22.7%; top: 45%;). Позицию в процентах, если резинить нужно.

Не нужно тексты пихать в картинку svg — они могут быть проигнорированы поисковиками!

Что в итоге?

  1. Картинка в фоне задает размер для враппера, в ней кривая линия, несвойственная для css.
  2. В коде — четкий список с данными в виде списка, seo — одобряэ )
  3. На экране — всё расставлено как нужно. Кружочек делаем через .timeline__item:before, вертикальную черту от блока к нему — .timeline__item:after

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

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