<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圣诞树雪花飘落动画,3D圣诞树旋转动画,3D立体圣诞树代码。
用纯css绘制三角形,不是用图片
CSS3圣诞树雪人下雪动画效果CSS3圣诞树雪人下雪动画效果CSS3圣诞树雪人下雪动画效果CSS3圣诞树雪人下雪动画效果CSS3圣诞树雪人下雪动画效果CSS3圣诞树雪人下雪动画效果CSS3圣诞树雪人下雪动画效果CSS3圣诞树雪人下雪...
运用html+css+js三件套实现动态圣诞树
圣诞树源码html+css圣诞树.zip圣诞树源码html+css圣诞树.zip圣诞树源码html+css圣诞树.zip圣诞树源码html+css圣诞树.zip圣诞树源码html+css圣诞树.zip圣诞树源码html+css圣诞树.zip圣诞树源码html+css圣诞树.zip圣诞...
非常漂亮的螺旋圣诞树动画源码 完整源码,纯CSS制作,不需要再做任何修改、补充,直接可以在浏览器中打开查看。
圣诞树源码Html5+CSS3+JS代码实现动态圣诞树.zip圣诞树源码Html5+CSS3+JS代码实现动态圣诞树.zip圣诞树源码Html5+CSS3+JS代码实现动态圣诞树.zip圣诞树源码Html5+CSS3+JS代码实现动态圣诞树.zip圣诞树源码...
使用H5+CSS3动画实现圣诞树源码
圣诞节即将来临,html+css实现圣诞树效果!带动效额
圣诞树源码Html5+CSS+JS实现动态圣诞树.zip动态圣诞树 效果展示: 整体圣诞树分为3个部分,书的主干、粒子特效、树上的卡片 树上的卡片(重点):每一张卡片上都有一个名字,代表圣诞树的叶子,后面可以根据自己需求...
Css画三角形border 加粗。
圣诞树源码.zip圣诞树集合,各种圣诞树,各种html+css和exe程序。圣诞树源码.zip圣诞树集合,各种圣诞树,各种html+css和exe程序。圣诞树源码.zip圣诞树集合,各种圣诞树,各种html+css和exe程序。圣诞树源码.zip...
立体式旋转效果非常棒的一款圣诞树效果 默认左右旋转 css3效果,低版本浏览器不支持 使用方法: 1、将head中的样式引入到你的样式表中 2、将body中需要的代码部分拷贝过去即可
html+js+css 绘制静态圣诞树
对于圣诞树,网上各像编程语言像python、css、java、c/c++都有见到过了,那么在绘图方面,还有一位实力强劲的语言,那就C#语言,它的GDI+技术也可以称的上是笑傲江湖,但网上鲜见C#代码画的圣诞树,所以今天我就使用 ...
纯CSS动画圣诞树Demo01 纯CSS螺旋圣诞树Demo02 纯CSS流星圣诞树Demo03 纯CSS水晶球圣诞树Demo04 HTML+CSS+JS圣诞树Demo05 圣诞树贺卡Demo06 Python版圣诞树 马赛克圣诞树 马赛克进阶圣诞树 进阶雪花圣诞树 豪华圣诞...
还在为网页太多图片加载太慢而发愁吗?纯CSS打造三角形,不需要用图片了!
【程序员的浪漫】接下来是雪花,圣诞树,新年和更好的我们。今天给大家带来几个好看的基于HTML+CSS(+JS)的圣诞树,完整源码
运用HTML5 Canvas绘图生成圣诞树特效,虽然圣诞节还没有来,但是看到这款HTML5制作的圣诞树效果,我迫不及待的将它分享给大家,实在是很佩服作者的水平,也很羡慕别人能驾驭HTML5,我只能望而兴叹了,还需要不断努力...
CSS3圣诞树雪人下雪动画效果是一款纯CSS3制作的冬天下雪网页动画片头,效果很棒。有圣诞树、雪人、雪花飘落、蓝天背景等元素。