Показать сообщение отдельно
  #1 (permalink)  
Старый 10.01.2017, 14:53
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Маскирование фонов
Добрый день уважаемые. Подскажите как реализовать маскирование фонов в CSS ?
Приведу простой пример:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
<style type="text/css" media="screen">
	.bigBlock{
  width: 100px;
  height: 100px;
  background-color: red;
}
 .square{
  width: 100px;
  height: 100px;
  background-color: black;
} 
.circle{
   width: 100px;
  height: 100px;
  -webkit-border-radius: 50%;
  -moz-border-radius:50% ;
  border-radius: 50%;
  border: 1px solid #fff;
}
</style>
</head>
<body>
	<div class="bigBlock">
          <div class="square">
           <div class="circle"></div>
     </div>
  </div>
</body>
</html>

Задание, как сделать так что б у верхнего круга был виден вон который у класса .bigBlock. То есть на выходе я хочу получить красный круг в чёрной оконтовке. Я пробвал работать через свойство
-webkit-clip-path: circle(50% at 50% 50%);
clip-path: circle(50% at 50% 50%);
но у меня почему то ни чего не прошло. Как сделать так что б круг игнорировал фон своего непосредственного родителя ?
Ответить с цитированием