task4-1.html

<!DOCTYPE html>
<html>
<head >
<title>4-1</title>
<meta charset="utf-8">
<style type="text/css">
*{
	padding:0;
	margin:0;
}
#wrap{
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-100px;
	margin-left: -200px;
}
#wrap1{
	clear:both;
	width:400px;
	height:200px;
	background-color: #ccc;
	position:relative;
	overflow:hidden;
}
.circle{
	width:100px;
	height:100px;
	border-radius: 50%;
	background-color: #fc0;
	position:absolute;
}
.circle1{
	top:-50px;
	left:-50px;
}
.circle2{
	bottom:-50px;
	right:-50px;
}
</style>
</head>
<body>
<div id="wrap">
	<div id="wrap1">
		<div class="circle circle1"></div>
		<div class="circle circle2"></div>
	</div>
</div>
</body>