Все сервисы Хабра
Сообщество IT-специалистов
Ответы на любые вопросы об IT
Профессиональное развитие в IT
Закрыть
Задать вопрос
mr jeery
@jeerjmin
HTML
CSS
Веб-разработка
Вёрстка
Как обрубить верхний-левый угол у div имея неоднородный фон?
https://codepen.io/Jeerjmin/pen/rKZKJz
У меня есть такое решение, но оно работает с однородным фоном, который можно выставить. А как быть если фон картинка ?
Вопрос задан
более трёх лет назад
607 просмотров
1
комментарий
Подписаться
1
Простой
1
комментарий
Facebook
Вконтакте
Twitter
Амир Алимжанов
@Amirez
https://ru.stackoverflow.com/questions/639765/%D0%...
Написано
более трёх лет назад
Решения вопроса
0
Пригласить эксперта
Ответы на вопрос
3
BarryHAllen
@BarryHAllen
Задача - сделать угол прозрачным?
Если так, то:
background: linear-gradient(135deg, transparent 36px, white 20px);
https://codepen.io/anon/pen/oyPMZK
upd: с границей по периметру:
https://codepen.io/anon/pen/mKzOrz
Ответ написан
более трёх лет назад
4
комментария
Нравится
4
4
комментария
Facebook
Вконтакте
Twitter
Амир Алимжанов
@Amirez
искал этот способ)
Написано
более трёх лет назад
mr jeery
@jeerjmin
Автор вопроса
BarryHAllen
, А как с вашим решением сделать границу по периметру ? У меня в примере она была, вы ее убрали.
Написано
более трёх лет назад
BarryHAllen
@BarryHAllen
mr jeery
немного магии
https://codepen.io/anon/pen/mKzOrz
Написано
более трёх лет назад
mr jeery
@jeerjmin
Автор вопроса
BarryHAllen
, если img кота сдвинуть влево
left: -40px;
, то изображение накладывается на левую границу. Как это избежать ?
Написано
более трёх лет назад
Ankhena
@Ankhena
Куратор тега CSS
Нежно люблю верстку
1. Фон из 5 градиентов. Нижний фон под углом 45 градусов прозрачный-синий-белый. И поверх 4 из синего в прозрачный с позиционированием и размером.
2. SVG
https://jsfiddle.net/rwcaj9g5/
Ответ написан
более трёх лет назад
3
комментария
Нравится
3
комментария
Facebook
Вконтакте
Twitter
Ankhena
@Ankhena
Куратор тега CSS
Сейчас с телефона, поэтому только логика, без кода.
С svg проще
Написано
более трёх лет назад
mr jeery
@jeerjmin
Автор вопроса
Ankhena
, Как с svg проще ? Вы в каком-то редакторе с ними работаете а потом экспортируете код ? Я пробовал со скетча экспортировать, но он с ошибками вылезает.
Написано
более трёх лет назад
Ankhena
@Ankhena
Куратор тега CSS
mr jeery
, например, вот так:
https://jsfiddle.net/rwcaj9g5/
Почитайте:
css.yoksel.ru/svg-shapes
css.yoksel.ru/svg-fill-and-stroke
И
qaru.site/questions/132892/svg-rounded-corner
Написано
более трёх лет назад
Алексей
@AlexZagatskiy
HTML / CSS developer
Примерно такое решение может подойти:
https://codepen.io/Zagatskiy/pen/YvJpqL
Ответ написан
более трёх лет назад
3
комментария
Нравится
3
комментария
Facebook
Вконтакте
Twitter
mr jeery
@jeerjmin
Автор вопроса
Алексей
это какой-то изврат, занимает слишком много места.
Написано
более трёх лет назад
Алексей
@AlexZagatskiy
можно добавить еще одну обертку, тогда размеры будут такие как нужно
Написано
более трёх лет назад
mr jeery
@jeerjmin
Автор вопроса
Алексей
, Если я хочу чтобы три карточки стояли друг за другом, с помощью flex row, то обертка мешает. Как можно добавить еще одну чтобы все ок было ?
Написано
более трёх лет назад
Ваш ответ на вопрос
Войдите, чтобы написать ответ
Войти через центр авторизации
Похожие вопросы
CSS
Простой
Как добавить прозрачность для sph в imgenx?
1 подписчик
вчера
26 просмотров
0
ответов
HTML
Простой
Как убрать нежелательные теги?
1 подписчик
вчера
80 просмотров
2
ответа
Вёрстка
Простой
Шрифт подключается криво, почему?
1 подписчик
вчера
52 просмотра
1
ответ
Веб-разработка
Простой
Как сделать список с которым можно будет работать в консоли?
1 подписчик
вчера
108 просмотров
1
ответ
JavaScript
+1 ещё
Простой
Простой счётчик без БД (допустим на основе txt файла)?
1 подписчик
вчера
140 просмотров
4
ответа
CSS
+1 ещё
Простой
Как сделать так, чтобы карточка была по размеру контента, если его немного?
1 подписчик
13 мар.
95 просмотров
1
ответ
JavaScript
+1 ещё
Простой
Есть ли на сегодня какое-нибудь решение выделить инпут по focus-visible?
1 подписчик
13 мар.
83 просмотра
1
ответ
JavaScript
+2 ещё
Простой
Как сделать так, что бы используя live server у меня не браузер открывался, а справа от самого кода открывалось окно со всем этим?
1 подписчик
13 мар.
118 просмотров
0
ответов
JavaScript
+1 ещё
Простой
Как получить такой эффект на мобильном?
1 подписчик
12 мар.
216 просмотров
0
ответов
HTML
+1 ещё
Простой
Как сверстать данную часть header?
1 подписчик
12 мар.
120 просмотров
0
ответов
Показать ещё
Загружается…
Вакансии с Хабр Карьеры
Специалист технической поддержки ИТ продукта
inSales
от 60 000 ₽
Парсер для сайта
Rotormine
от 10 000 до 100 000 ₽
JavaScript FullStack разработчик
Rocket
•
Смоленск
от 120 000 ₽
Минуточку внимания
Войдите на сайт
Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации
Закрыть
Реклама