用css画苹果

最新推荐文章于 2022-12-02 17:55:49 发布

ThatMonth

最新推荐文章于 2022-12-02 17:55:49 发布

阅读量764

点赞数 1

分类专栏：前端文章标签： css html js

本文链接：https://blog.csdn.net/weixin_44853310/article/details/109939223

版权

前端专栏收录该内容

31 篇文章 1 订阅

订阅专栏

代码

<!DOCTYPE html>
<html>
<head>
	<title>苹果</title>
	<style type="text/css">
		.a{
			
			background-color: red;
			border-radius: 70% 70% 50% 50%;
			width: 300px;
			height: 300px;
			position:relative;
			margin: 0 auto;			
			z-index: 1;
		}

		.b{
			
			background-color:red;
			border-radius: 70% 70% 50% 50%;
			width: 300px;
			height: 300px;
			position:absolute;
			left:50%;
			z-index: 1;
		}

		.c{
			
			background-color: red;
			border-radius: 50% 50% 50% 70%;
			width: 300px;
			height: 300px;
			position:absolute;
			top:30%;
			z-index: 1;

		}

		.d{
			
			background-color: red;
			border-radius: 50% 50% 70% 50%;
			width: 300px;
			height: 300px;
			position:absolute;
			top:30%;
			left:50%;
			z-index: 1;
		}

		.e{
			
			background-color: red;
			border-radius: 50% 50% 50% 50%;
			width: 360px;
			height: 360px;
			position:absolute;
			top:4%;
			right:-18%;
			z-index: 1;
			} 
		.f{
			
			background-color: red;
			border-radius: 50% 50% 50% 50%;
			width: 350px;
			height: 350px;
			position:absolute;
			top:10%;
			left:35%;
			z-index: 1;

		} 


		.g{
			background-color: white;
			border-radius: 50% 50% 50% 50%;
			width: 250px;
			height: 250px;
			position:absolute;
			top:10%;
			left:118%;
			z-index: 1;
		}

		.h{
			background-color: green;
			border-radius: 0% 100% 0% 100%;
			width: 150px;
			height: 160px;
			margin: 0 auto;
			position:relative;
			left:8%;
			top:10%;
			z-index: 1;	
			transform: rotate(90deg);
		}

	</style>
</head>
<body>
<h1 align="center">Apple For TWJ</h1>
<div class="h"></div>
<div class="a">
	<div class="b"></div>
	<div class="c"></div>
	<div class="d"></div>
	<div class="e"></div>
	<div class="f"></div>
	<div class="g"></div>

	</div>


</body>
</html>