Как сделать на css блок с вырезом в форме треуголоьника?

Question

[Чёкатилло]

Нужен такой блок:


Он должен быть таким без наложений, а иметь такую форму
Есть пример, как делается верх такого блока: jsfiddle.net/esp3hw4o/4

Но не пойму там, как сделать эту форму выше? Как добавить прямоугольный низ, но что бы в итоге это стало единым блоком, как на картинке

Answer 1

[dom1n1k]

В примере по ссылке какой-то адский клубок костылей. Да, оно работает, но модифицировать это под новые требования и условия будет нереально. Я бы очень не хотел получить себе такую хрень в продакшен.

Я бы смотрел в сторону клиппинга и масок для современных браузеров, а для старых - просто ничего. Не будет там этого выреза - и не смертельно. Graceful degradation.
Ссылки для размышлений:
https://www.html5rocks.com/en/tutorials/masking/adobe/ (где-то на хабре был перевод этой статьи)
codepen.io/yoksel/full/fsdbu

P.S. Правда, если память не изменяет, Edge там тоже будет считаться "старым" браузером. А вот вебкиты и мозилла нормально.

Comments

[Чёкатилло]

Тогда так..)) У меня готов такой внешний вид двух блоков cg91812-wordpress-3.tw1.ru Здесь два блока Сверху с уголком а снизу просто прямоугольник Все и так хорошо НО при изменении масштабирования в браузере эти блоки норовят оторваться друг от друга Как это исправить?? А то хз как все это поведет себя во всех устройствах

[dom1n1k]

Если это всего лишь декоративная шторка, то я бы сделал этот градиент и вырез фоновой картинкой в блоке и всё. Предельно просто и надежно. И если завтра дизайнер захочет сменить форму выреза с треугольной на полукруглую - меняется на раз-два.

Answer 2

[Андрей]

https://jsfiddle.net/3tfhz53o/
Используй псевдо-элементы

Comments

[Чёкатилло]

Надо что бы треугольник был прозрачным а остальное поле этого блока будет в цвете

Answer 3

[surid]

codepen.io/surid/pen/yaqpxr