`

用CSS画三角形,圣诞树

    博客分类:
  • css
阅读更多

 

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

 

 

分享到:
评论

相关推荐

    CSS3 3D圣诞树雪花飘落动画.zip

    CSS3 3D圣诞树雪花飘落动画,3D圣诞树旋转动画,3D立体圣诞树代码。

    用css画三角形

    用纯css绘制三角形,不是用图片

    CSS3圣诞树雪人下雪动画效果.rar

    CSS3圣诞树雪人下雪动画效果CSS3圣诞树雪人下雪动画效果CSS3圣诞树雪人下雪动画效果CSS3圣诞树雪人下雪动画效果CSS3圣诞树雪人下雪动画效果CSS3圣诞树雪人下雪动画效果CSS3圣诞树雪人下雪动画效果CSS3圣诞树雪人下雪...

    运用html+css+js三件套实现动态圣诞树

    运用html+css+js三件套实现动态圣诞树

    圣诞树源码html+css圣诞树.zip

    圣诞树源码html+css圣诞树.zip圣诞树源码html+css圣诞树.zip圣诞树源码html+css圣诞树.zip圣诞树源码html+css圣诞树.zip圣诞树源码html+css圣诞树.zip圣诞树源码html+css圣诞树.zip圣诞树源码html+css圣诞树.zip圣诞...

    圣诞树源码-纯CSS制作螺旋圣诞树动画源码下载

    非常漂亮的螺旋圣诞树动画源码 完整源码,纯CSS制作,不需要再做任何修改、补充,直接可以在浏览器中打开查看。

    圣诞树源码Html5+CSS3+JS代码实现动态圣诞树.zip

    圣诞树源码Html5+CSS3+JS代码实现动态圣诞树.zip圣诞树源码Html5+CSS3+JS代码实现动态圣诞树.zip圣诞树源码Html5+CSS3+JS代码实现动态圣诞树.zip圣诞树源码Html5+CSS3+JS代码实现动态圣诞树.zip圣诞树源码...

    CSS3动画实现圣诞树源码

    使用H5+CSS3动画实现圣诞树源码

    html+css实现圣诞树效果!

    圣诞节即将来临,html+css实现圣诞树效果!带动效额

    圣诞树源码Html5+CSS+JS实现动态圣诞树.zip

    圣诞树源码Html5+CSS+JS实现动态圣诞树.zip动态圣诞树 效果展示: 整体圣诞树分为3个部分,书的主干、粒子特效、树上的卡片 树上的卡片(重点):每一张卡片上都有一个名字,代表圣诞树的叶子,后面可以根据自己需求...

    Css画三角形1

    Css画三角形border 加粗。

    圣诞树源码html+css.zip

    圣诞树源码.zip圣诞树集合,各种圣诞树,各种html+css和exe程序。圣诞树源码.zip圣诞树集合,各种圣诞树,各种html+css和exe程序。圣诞树源码.zip圣诞树集合,各种圣诞树,各种html+css和exe程序。圣诞树源码.zip...

    css3简洁动感旋转圣诞树效果

    立体式旋转效果非常棒的一款圣诞树效果 默认左右旋转 css3效果,低版本浏览器不支持 使用方法: 1、将head中的样式引入到你的样式表中 2、将body中需要的代码部分拷贝过去即可

    js+css绘制静态圣诞树源码

    html+js+css 绘制静态圣诞树

    天罡gg - C# 代码挑战画【动态带魔法】圣诞树

    对于圣诞树,网上各像编程语言像python、css、java、c/c++都有见到过了,那么在绘图方面,还有一位实力强劲的语言,那就C#语言,它的GDI+技术也可以称的上是笑傲江湖,但网上鲜见C#代码画的圣诞树,所以今天我就使用 ...

    圣诞树源码基于python版圣诞树

    纯CSS动画圣诞树Demo01 纯CSS螺旋圣诞树Demo02 纯CSS流星圣诞树Demo03 纯CSS水晶球圣诞树Demo04 HTML+CSS+JS圣诞树Demo05 圣诞树贺卡Demo06 Python版圣诞树 马赛克圣诞树 马赛克进阶圣诞树 进阶雪花圣诞树 豪华圣诞...

    纯CSS打造三角形

    还在为网页太多图片加载太慢而发愁吗?纯CSS打造三角形,不需要用图片了!

    基于HTML+CSS+JS的圣诞树和贺卡.zip

    【程序员的浪漫】接下来是雪花,圣诞树,新年和更好的我们。今天给大家带来几个好看的基于HTML+CSS(+JS)的圣诞树,完整源码

    运用HTML5 Canvas绘图生成圣诞树特效.rar

    运用HTML5 Canvas绘图生成圣诞树特效,虽然圣诞节还没有来,但是看到这款HTML5制作的圣诞树效果,我迫不及待的将它分享给大家,实在是很佩服作者的水平,也很羡慕别人能驾驭HTML5,我只能望而兴叹了,还需要不断努力...

    CSS3圣诞树雪人下雪动画效果.zip

    CSS3圣诞树雪人下雪动画效果是一款纯CSS3制作的冬天下雪网页动画片头,效果很棒。有圣诞树、雪人、雪花飘落、蓝天背景等元素。

Global site tag (gtag.js) - Google Analytics