我要投搞

标签云

收藏小站

爱尚经典语录、名言、句子、散文、日志、唯美图片

当前位置:2019正版免费全年资料 > 圣诞节 >

若何用CSS统制div画三角形圣诞树

归档日期:10-26       文本归类:圣诞节      文章编辑:爱尚语录

  可选中1个或众个下面的环节词,寻求合联原料。也可直接点“寻求原料”寻求全体题目。

  正在桌面新筑一个文本文档,并定名为“三角形”,掀开新筑的文本文档,把html里的doctype、head、body等框架搭好。

  【属意】div的长宽设为0,border为边框,会看到如下四个三角状的图形。

  上述代码画的还不是三角形,可是是四个三角,只须将border周边的颜色造成白色就能够了,比方除了border-bottom: 100px solid green;其余全变为white,就会看到如下结果,当然你也能够凭据本人须要来安排。

  另外能够将border-top的像素设为0;其余双方也调小一点而且颜色设为白色,就会只看真相下的一个三角形了。

  【属意】凭据本人现实来挑选本人念要到达的结果。图一图二结果差异,即是border设定差异的道理。

  将第一个小三角形浮动起来,如许就掩盖到第2个上面,然后行使margin值调动职位,最终显示出圣诞树的上面实质,代码如下,图如下。

  再出席一个div名字为footer,担任其巨细体式与颜色,并用margin安排期职位。

本文链接:http://hddv.net/shengdanjie/1759.html