用CSS画三角形，圣诞树

最新推荐文章于 2023-07-11 17:54:37 发布

哈哈__哈哈

最新推荐文章于 2023-07-11 17:54:37 发布

阅读量316

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/hongmin118/article/details/84758206

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<style type="text/css">
			#main1{
				width: 1000px;
				height: 500px;
				background-color: gray;
			}

			#triangle{
				width: 200px;
				height: 200px;
				border-top: 100px solid red;
				border-right: 100px solid blue;
				border-bottom: 100px solid green;
				border-left: 100px solid yellow;
				float:left;
			}
			#triangle2{
				width: 200px;
				height: 200px;
				border-top: 50px solid red;
				border-right: 50px solid blue;
				border-bottom: 50px solid green;
				border-left: 50px solid yellow;
				float:left;
				margin-left: 50px;
			}


			#triangle3{
				width: 0px;
				height: 100px;
				border-top: 50px solid transparent;
				border-right: 50px solid transparent;
				border-bottom: 50px solid green;
				border-left: 50px solid transparent;
				float:left;
				margin-left: 50px;
			}

			#main2 {
				width: 1000px;
				height: 500px;
				background-color: gray;
			}

			

			#a1{
				width: 0px;
				height: 0px;
				border-top: 0px solid transparent;
				border-right: 70px solid transparent;
				border-bottom: 50px solid green;
				border-left: 70px solid transparent;
				margin-left: 80px;
			}

			#a2{
				width: 0px;
				height: 0px;
				border-top: 0px solid transparent;
				border-right: 100px solid transparent;
				border-bottom: 70px solid green;
				border-left: 100px solid transparent;
				margin-left: 50px;
				margin-top: 10px;
			}
			#a3{
				width: 0px;
				height: 0px;
				border-top: 0px solid transparent;
				border-right: 120px solid transparent;
				border-bottom: 80px solid green;
				border-left: 120px solid transparent;
				margin-left: 28px;
				margin-top: 10px;
			}

			#a4 {
				width: 50px;
				height: 200px;
				background-color: green;
				margin-left: 120px;
				margin-top: 8px;
			}
		</style>

	</head>
	<body>
		<div id="main1">
			<div id="triangle"></div>
			<div id="triangle2"></div>
			<div id="triangle3"></div>
		</div>
		<div id="main2">
			<div id="a1"></div>
			<div id="a2"></div>
			<div id="a3"></div>
			<div id="a4"></div>
		</div>
	</body>

</html>

哈哈__哈哈

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用CSS画三角形，圣诞树

&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; #main1{ width: 1000px; height: 500px; background-color: gray; } #triangle{ width: 200px; height:...
复制链接

扫一扫