Все сервисы Хабра
Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
Закрыть
Задать вопрос
shane89
@shane89
CSS
Простой способ сделать блок с кривой линией?
Вопрос задан
более трёх лет назад
1642 просмотра
Комментировать
Подписаться
1
Оценить
Комментировать
Facebook
Вконтакте
Twitter
Решения вопроса
1
Дмитрий
@Darth_Solo
Падаван области Фронт-энда.
Я делал таким вот способом:
Родителю {
transform: skewX(*deg); }
Сыну {
transform: skewX(-*deg); }
Только вот не скажу что у всех браузеров хорошее сглаживание, потому края выглядят далеко от идеала.
Ответ написан
более трёх лет назад
2
комментария
Нравится
1
2
комментария
Facebook
Вконтакте
Twitter
shane89
@shane89
Автор вопроса
не то, еще есть варианты?
Написано
более трёх лет назад
Дмитрий
@Darth_Solo
shane89
: Простых способов больше нет.
Проще только фоновую картинку взять.
Да и в принципе сложных способов то для этой задачи не особо много.
Написано
более трёх лет назад
Пригласить эксперта
Ответы на вопрос
2
Ксения Михайлова
@arizona
а что я, собственно, здесь делаю?...
А чем вас настолько не устраивает skew?
Можно нарисовать svg. Будет весьма растягиваемо и не мыльно.
Можно исхитриться нарисовать треугольники border'ом у before/after-элементов, но настолько узкого контентного блока у вас не получится.
Ответ написан
более трёх лет назад
2
комментария
Нравится
1
2
комментария
Facebook
Вконтакте
Twitter
shane89
@shane89
Автор вопроса
svg это уже интересней. Я только изучаю. Ксения не могли дать пример, как можно рисовать треугольник, на всю ширину монитора.
Написано
более трёх лет назад
Ксения Михайлова
@arizona
Вот здесь меню оформлено в помощью svg
kitchenstore.com.ru
Написано
более трёх лет назад
Михаил Чирский
@chirskiy_mixail
Очень давно занимаюсь версткой, имею огромный опыт
css3clickchart.com/#skew-transform
Ответ написан
более трёх лет назад
2
комментария
Нравится
2
комментария
Facebook
Вконтакте
Twitter
shane89
@shane89
Автор вопроса
не то, есть еще способы?
Написано
более трёх лет назад
Михаил Чирский
@chirskiy_mixail
shane89
: Смотря какая задача, и на сколько она приоритетна, т.к на картинке, вы на CSS не сделаете, т.к сглаживания идеального не будет
Написано
более трёх лет назад
Ваш ответ на вопрос
Войдите, чтобы написать ответ
Войти через центр авторизации
Похожие вопросы
JavaScript
+2 ещё
Простой
Как сделать так, что бы используя live server у меня не браузер открывался, а справа от самого кода открывалось окно со всем этим?
1 подписчик
5 часов назад
21 просмотр
0
ответов
JavaScript
+1 ещё
Простой
Как получить такой эффект на мобильном?
1 подписчик
13 часов назад
93 просмотра
0
ответов
HTML
+1 ещё
Простой
Как сверстать данную часть header?
1 подписчик
14 часов назад
73 просмотра
0
ответов
HTML
+1 ещё
Простой
Как сделать что бы в меню были вертикальные полосы на всю высоту?
2 подписчика
вчера
178 просмотров
2
ответа
HTML
+1 ещё
Простой
Как лучше реализовать данный блок?
1 подписчик
вчера
84 просмотра
2
ответа
JavaScript
+1 ещё
Простой
Как скрыть/показать элемент с определенным текстом?
2 подписчика
10 мар.
866 просмотров
2
ответа
CSS
Средний
Как победить проблемы с overflow-y: sсroll?
1 подписчик
06 мар.
137 просмотров
2
ответа
CSS
Средний
Как решить проблему со смещением макета и подогнать контейнер под размер картинки?
1 подписчик
04 мар.
110 просмотров
2
ответа
CSS
Простой
Возможно ли изменение самого контейнера через контейнерный запрос?
1 подписчик
04 мар.
71 просмотр
0
ответов
JavaScript
+3 ещё
Средний
Как уменьшить масштаб блока в зависимости от размеров родителя?
1 подписчик
04 мар.
140 просмотров
2
ответа
Показать ещё
Загружается…
Вакансии с Хабр Карьеры
Специалист технической поддержки ИТ продукта
inSales
от 60 000 ₽
JavaScript FullStack разработчик
Rocket
•
Смоленск
от 120 000 ₽
Фронтенд разработчик Middle
Astra Health Tech
•
Москва
от 200 000 до 250 000 ₽
Минуточку внимания
Войдите на сайт
Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации
Закрыть
Реклама