css3实现小米的logo

最新推荐文章于 2023-11-05 23:28:12 发布

wjlotus

最新推荐文章于 2023-11-05 23:28:12 发布

阅读量3.1k

点赞数 2

本文链接：https://blog.csdn.net/wjlotus/article/details/39408791

版权

昨天小米笔试遇到的题目，实现如下

<!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: 415px;
		height: 300px;
		margin:150px auto;
		border-radius: 25px;
	}
	#left,#right{
		background-color: #fff;
		margin-top:40px;
		height: 220px;
	}
	#left{
		float: left;
		width: 250px;
		margin-left: 35px;
		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: 40px;
		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:35px;}

	</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>

效果如下：