Маскирование фонов CSS

Добрый день уважаемые. Подскажите как реализовать маскирование фонов в CSS ?
Необходимо добиться что б на выходе получить красный круг (5штук) с чёрным обводом. Эффект как-будто в диве с классом el дырка и через него просвечивает нижний фон. Я пробовал через clip-path но оно обрезает наружное, а мне надо то что внутри что б вырезало
.block{ width: 100px; height: 500px; background-color: red; } .el{ width: 100px; height: 100px; background-color: black; /* -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); */ }

Ответ

А может попробовать маски для этой цели. Сделаем из круга маску и сквозь нее будем смотреть на подложку. В первом варианте у меня красный квадрат подложка, а во втором растровое изображение.

Теперь цветы. Фотка Yoksel и идеи её по использованию масок

Вот в качестве маски шестиугольник

Отличная статья о масках от Yoksel