css-制作360Logo

最新推荐文章于 2021-03-08 18:23:49 发布

糟糕透了的都精彩极了

最新推荐文章于 2021-03-08 18:23:49 发布

阅读量290

点赞数

分类专栏： css html 文章标签： html css

本文链接：https://blog.csdn.net/qq_42902470/article/details/86510004

版权

html 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

css

3 篇文章 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

糟糕透了的都精彩极了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css-制作360Logo

360-logo&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;360-logo&lt;/title&gt; &lt;style&gt; .div1 { width: 0; border-bottom: 60px solid #00D563; border-left: 60px solid #00D56...
复制链接

扫一扫