Фигурная обрезка

Блок можно обрезать по любой фигуре, не рисуя картинку и не добавляя масок. Тяните точки — форма меняется прямо на глазах, а код собирается внизу.

Фигура

Точку можно и просто перетащить. Выбранная подсвечена синим.

Что обрезаем

Форма

Блок с текстом

Точки видны только здесь — на готовой странице их не будет.

CSS


        

        
Обрезка не влияет на то, сколько места занимает блок: соседние элементы по-прежнему обтекают его прямоугольник. И нажатия в срезанных углах не проходят — там уже пусто.