Показать сообщение отдельно
  #14 (permalink)  
Старый 21.01.2017, 02:35
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Как вариант использовать mix-blend-mode: multiply;
<!DOCTYPE html><html lang="en">
	<head>
		<meta charset="utf-8">
		<style type="text/css">

			.bigBlock{
				width: 100px;
				height: 100px;
				background-color: red;
			}

			.square{
				width: 100px;
				height: 100px;
				background-color: black;
				mix-blend-mode: multiply;
			} 

			.circle{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background: white;
			}

		</style>
	</head>
	<body>
		<div class="bigBlock">
			<div class="square">
				<div class="circle"></div>
			</div>
		</div>
	</body>
</html>


Если позволите упростить вашу HTML-разметку и использовать радиальный градиент, то можно так.
<!DOCTYPE html><html lang="en">
	<head>
		<meta charset="utf-8">
		<style type="text/css">

			.bigBlock {
				width: 100px;
				height: 100px;
				background-color: red;
			}

			.square {
				width: 100px;
				height: 100px;
			} 

			.circle {
				background: radial-gradient(closest-side at 50% 50%, transparent 90%, black calc(90% + 1px)) 0 0 / 100px 100px;
			}

		</style>
	</head>
	<body>
		<div class="bigBlock">
			<div class="square circle">
		</div>
	</body>
</html>


http://codepen.io/anon/pen/RKpmYW?editors=1100
Ответить с цитированием