css-制作360Logo

迈不过友情╰ 2022-03-26 08:59 234阅读 0赞

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][]

[360]: /images/20220326/7a3c6ef1cdd9444394610f7f79af53e2.png