css-制作360Logo

360-logo
<head>
	<meta charset="UTF-8">
	<title>360-logo</title>
	<style>
		.div1 {
			width: 0;
			border-bottom: 60px solid #00D563;
			border-left: 60px solid #00D563;
			border-top: 60px solid #00D563;
			border-right: 60px solid #00D563;
			border-top-right-radius: 60px;
			border-bottom-left-radius: 60px;
		}
		
		.div2 {
			width: 0;
			border-bottom: 60px solid #14ADF6;
			border-left: 60px solid #14ADF6;
			border-top: 60px solid #14ADF6;
			border-right: 60px solid #14ADF6;
			border-top-left-radius: 60px;
			border-bottom-right-radius: 60px;
			margin-top: -120px;
			margin-left: 120px;
		}
		
		.div3 {
			width: 0;
			border-bottom: 60px solid #F5A000;
			border-left: 60px solid #F5A000;
			border-top: 60px solid #F5A000;
			border-right: 60px solid #F5A000;
			border-bottom-right-radius: 60px;
			border-top-left-radius: 60px;
		}
		
		.div4 {
			width: 0;
			border-bottom: 60px solid #FF605C;
			border-left: 60px solid #FF605C;
			border-top: 60px solid #FF605C;
			border-right: 60px solid #FF605C;
			border-bottom-left-radius: 60px;
			border-top-right-radius: 60px;
			margin-top: -120px;
			margin-left: 120px;
		}
		
		.div5 {
			width: 0;
			border-bottom: 50px solid #2BF09A;
			border-left: 50px solid #2BF09A;
			border-top: 50px solid #2BF09A;
			border-right: 50px solid #2BF09A;
			border-top-right-radius: 50px;
			border-bottom-left-radius: 50px;
		}
		
		.div6 {
			width: 0;
			border-bottom: 50px solid #FDC668;
			border-left: 50px solid #FDC668;
			border-top: 50px solid #FDC668;
			border-right: 50px solid #FDC668;
			border-top-left-radius: 50px;
			border-bottom-right-radius: 50px;
		}
		
		.div7 {
			width: 0;
			border-bottom: 50px solid #50D1FF;
			border-left: 50px solid #50D1FF;
			border-top: 50px solid #50D1FF;
			border-right: 40px solid #50D1FF;
			border-bottom-right-radius: 50px;
			border-top-left-radius: 50px;
			margin-top: -200px;
			margin-left: 100px;
		}
		
		.div8 {
			width: 0;
			border-bottom: 50px solid #FF9D9B;
			border-left: 50px solid #FF9D9B;
			border-top: 50px solid #FF9D9B;
			border-right: 50px solid #FF9D9B;
			border-bottom-left-radius: 50px;
			border-top-right-radius:  50px;
			margin-left: 100px;
		}
		.div9{
			margin-top: -220px;
			margin-left: 20px;
		}
	</style>
</head>

<body>
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
	<div class="div4"></div>
	<div class="div9">

		<div class="div5"></div>
		<div class="div6"></div>
		<div class="div7"></div>
		<div class="div8"></div>

	</div>

</body>
效果：
360
猜你喜欢
