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

#css #svg #background #clip_path

Добрый день уважаемые. Подскажите как реализовать маскирование фонов в 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%); */
}

  

    
  




    

Ответы

Ответ 1

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








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








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








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


Ответ 2

Такое ощущение, что недавно отвечал на такой же вопрос на SO.
Чёрная часть маски убирается из элемента, а белая остаётся:



html, body {
  height: 100%;
  margin: 0;
  background: linear-gradient(to top, red, blue);
}

svg {
  display: block;
  width: 150px;
}