Как сделать такой блог с такой границей?

Question

[tokmaganbet1]

Как правильнее наложить такой блок и сделать такой угол? Просто наложить фото на задний фон не разумно, так как таких блоков 5.

Comments

[Alex]

1. :before :after
2. SVG
3. Картинка с прозрачностью

[Дмитрий Кузнецов]

блог...

[tokmaganbet1]

Дмитрий Кузнецов, опечатка, в описании написал правильно.

Answer 1

[Roman Chasovitin]

Мб это картинка? Т.е. весь фон - одно целое изображение.

Comments

[tokmaganbet1]

вроде так и есть, но это часть от лендинга, если грузить каждую картинку, а их 5, то представляю как долго будет грузиться этот лендинг)

Answer 2

[xuryrg2034]

На странице есть два блока, левый (информация и поля ввода), правый (картинка). У левого блока надо сделать псевдокдасс after (class:after), и из него сделать триугольник (если не знаешь погугли как на CSS сделать триугольник), задай ему свойство position:absolute, а его родители position:relative, дальше позиционирование его при помощи right, top... Добавь в этот псевдокдасс свойство content в которое ты впишешь нужный тебе текст.

Comments

[tokmaganbet1]

Спасибо, тоже думал насчет позиционирования, просто не дружу с этими бордерами)

Answer 3

[Евгений]

-webkit-clip-path: polygon(0 0, 77% 0, 100% 100%, 0 100%);
clip-path: polygon(0 0, 77% 0, 100% 100%, 0 100%);

Answer 4

[rinatoptimus]

Поищите skew corner css.