Как обрубить верхний-левый угол у div имея неоднородный фон?

Question

[mr jeery]

https://codepen.io/Jeerjmin/pen/rKZKJz

У меня есть такое решение, но оно работает с однородным фоном, который можно выставить. А как быть если фон картинка ?

Comments

[Амир Алимжанов]

https://ru.stackoverflow.com/questions/639765/%D0%...

Answer 1

[BarryHAllen]

Задача - сделать угол прозрачным?
Если так, то:
background: linear-gradient(135deg, transparent 36px, white 20px);
https://codepen.io/anon/pen/oyPMZK
upd: с границей по периметру:
https://codepen.io/anon/pen/mKzOrz

Comments

[Амир Алимжанов]

искал этот способ)

[mr jeery]

BarryHAllen, А как с вашим решением сделать границу по периметру ? У меня в примере она была, вы ее убрали.

[BarryHAllen]

mr jeery
немного магии
https://codepen.io/anon/pen/mKzOrz

[mr jeery]

BarryHAllen, если img кота сдвинуть влево left: -40px;, то изображение накладывается на левую границу. Как это избежать ?

Answer 2

[Ankhena]

1. Фон из 5 градиентов. Нижний фон под углом 45 градусов прозрачный-синий-белый. И поверх 4 из синего в прозрачный с позиционированием и размером.

2. SVG
https://jsfiddle.net/rwcaj9g5/

Comments

[Ankhena]

Сейчас с телефона, поэтому только логика, без кода.

С svg проще

[mr jeery]

Ankhena, Как с svg проще ? Вы в каком-то редакторе с ними работаете а потом экспортируете код ? Я пробовал со скетча экспортировать, но он с ошибками вылезает.

[Ankhena]

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

Answer 3

[Алексей]

Примерно такое решение может подойти: https://codepen.io/Zagatskiy/pen/YvJpqL

Comments

[mr jeery]

Алексей это какой-то изврат, занимает слишком много места.

[Алексей]

можно добавить еще одну обертку, тогда размеры будут такие как нужно

[mr jeery]

Алексей, Если я хочу чтобы три карточки стояли друг за другом, с помощью flex row, то обертка мешает. Как можно добавить еще одну чтобы все ок было ?