Как css сделать кривые линии, без помех?
Добрый день. Возник вопрос сделать кривые линии между элементами, типа как пошаговая инструкция или пошаговые действия. В общем, я нашел стать. как можно сделать это через псевдо элементы с помощью border-top, border-left и т.д.
Все более менее хорошо, но:
1) Есть ли нормальный метод ? с помощью css
2) Как убрать мусор полу невидимой линии других сторон?
— Если спрятать за элемент, то вроде бы норм, а если эти линии не за элементом, то кажется, что на экране пыль, мусор, т.е. бросается в глаза все это.
Вот код которым я пользовался
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);- Вопрос задан более трёх лет назад
- 424 просмотра
2 комментария
Простой 2 комментария
Как нарисовать на CSS плавный изгиб?
Народ можно на CSS нарисовать элемент который выделений красной рамкой?
Отслеживать
9,323 3 3 золотых знака 29 29 серебряных знаков 57 57 бронзовых знаков
задан 5 авг 2018 в 9:20
226 1 1 серебряный знак 10 10 бронзовых знаков
белый прямоугольник что-ли?)))
5 авг 2018 в 9:25
:)) нет, я белым прямоугольником обозначил типа «горб» который надо нарисовать
5 авг 2018 в 9:36
а, понял, как, хз, но в следующий раз давай адекватные картинки, у меня например для чтения SС контраст на мониторе выведен почти в ноль и блок одного цвета с фоном. и и изгиба соответственно никакого не видно. Думаю, изгиб такой как минимум кучей кода придется делать на псевдоэлементах, я бы картинкой сделал с небольшим упрощением и дизайнеру руки поотрывал! и владельцы планшетов и смартфонов меня поддержат, ибо все эти финтифлюшки катастрофично тормозят открытие страниц на моб. устройствах. вплоть до закрытия вкладки и переход на сайт конкурента!
5 авг 2018 в 9:51
@СергейВ., ну, дизайнерам руки отрывать не нужно, в чём проблема использовать всего лишь один тег path в svg?) Да и на CSS не так проблемно это сделать
5 авг 2018 в 9:55
@Arthur А как именно это можно сделать на чистом CSS? Можно разве что добавить clip-path с url , где указано значение идентификатора path с SVG, но тогда смысл использовать CSS теряется. Как на CSS можно делать кривые линии? Способ накидать кучу элементов с border-radius не уверен, что лучшая затея.
Как сделать кривые границы блоков в CSS
Если вам требуется сделать границы шапки или подвала скошенными, то достаточно применить к элементу CSS-свойство clip-path со значением polygon() , которое определяет многоугольник, используя правило заполнения SVG и набор вершин.
Принцип действия clip-path: polygon
В свойстве указываются все края фигуры в процентах в виде координат « x y », точка отсчета – левый верхний угол. Например ниже, указаны все точки исходного прямоугольника.
Теперь изменим точку «2», смещение по оси у на 10%:
Как сделать пару кривых блоков CSS?
Появилась следующая проблема: требуется сделать такую конструкцию ( рисунок приложен ), а я не могу понять, как это можно сделать. Помогите, пожалуйста. UPD: Возможно, не совсем правильно изложил суть вопроса. На рисунке показан не градиент, а два разных блока, между которыми имеется расстояние
Отслеживать
Ясырев Михаил
задан 20 июн 2018 в 13:41
Ясырев Михаил Ясырев Михаил
157 7 7 бронзовых знаков
Возможно дубликат вопроса, чекни это, вроде, решение твоей проблемы.
20 июн 2018 в 13:52
Возможный дубликат вопроса: Как в CSS сверстать неровную фигуру?
21 июн 2018 в 9:19
2 ответа 2
Сортировка: Сброс на вариант по умолчанию
Можно с помощью linear-gradient :
Отслеживать
ответ дан 20 июн 2018 в 13:57
2,359 6 6 серебряных знаков 17 17 бронзовых знаков