CSS3实现小米圆角logo

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>css3实现小米logo </title>
	<style type="text/css">
	body{
		background-color: #ccc;	
	}
	#main{
		background-color: #f57923;
		width: 600px;
		height: 600px;
		margin:150px auto;
		border-radius: 75px;
	}
	#left,#right{
		background-color: #fff;
		margin-top:200px;
		height: 220px;
	}
	#left{
		float: left;
		width: 250px;
		margin-left: 130px;
		border-top-right-radius: 65px;
		z-index: -99999;
 
	}
	#inner{
		background-color: #f57923;
		width: 140px;
		height: 170px;
		margin-left: 55px;
		margin-top: 50px;
		border-top-right-radius:39px;
		z-index: 10px;
 
	}
	#center{
		background-color: #fff;
		position: relative;
		width: 50px;
		height: 125px;
		top:45px;
		left: 45px;
		z-index:999999; }
	#right{
	float: right;
	width: 50px;
	margin-right:150px;}
 
	</style>
</head>
<body>
	<div id="main">
		<div id="left">
			<div id="inner">
				<div id="center"></div>
			</div>
		</div>
		<div id="right"></div>
	</div>
 
	
</body>
</html>

©️李联华的博客网当前IP地址：3.145.176.49，归属地:俄亥俄州Dublin ，欢迎您的访问！

温馨提示 : 非特殊注明，否则均为李联华的博客原创文章，本站文章未经授权禁止任何形式转载
文章链接：https://www.ooize.com/css3-implements-xiaomi-rounded-logo.html

二维码