用DIV+CSS画圣诞树


最近在系统的看HTML的相关内容,当然里面涉及到了DIV和CSS的内容。以前只是略有涉及,会改改代码,调一下位置,未曾仔细思考过一些问题。

例如:如何用DIV和CSS画一个简单的圣诞树。

先把这个问题分解一下,圣诞树至少要是上面俩三角形,下面是一个矩形。

这里就有一个难题了,用div怎么画三角形?

仔细想一想,DIV的属性无非是margin、border和padding的各种组合。分析一圈下来,就只能从border下手了。试想一下,如果边框border最大,大到整个div全是边框,会怎样?

div_border

是不是上面这样?

好了,现在我们只需要把top、right和left的颜色设置成背景色或者透明就可以得到一个三角形了。类似的三角形,我们只需要两个,就可以达到效果了。

现在还有一个问题,如果两个三角形垂直排列的话,中间还是会有空隙,因为上边不论透明还是背景色,它都还是存在的。所以我们需要把他的宽度设置为0。

效果就是下面这样:

201310290941121

好了,接下来我们只需要利用margin和float来调一下左右位置,即可得到我们想要的效果了。

下面画一个矩形,方法就不再陈述,还是用浮动和外边距来控制左右即可。

下面附上一个完整的例子。

运行出来就是下面的效果:

triangle


 

 

声明:疯人峰语|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 用DIV+CSS画圣诞树


做你想做的,不必管别人