带来一篇CSS代码实例:用CSS代码写出的各类外形图形
样式的调整更加方便。内容和样式的分离，使页面和样式的调整变得更加方便。破洛洛文章简介：纯用CSS界说写出来的图形写法。
一共搜集收拾了图形20个，对照有用，同时也为了熟习CSS的代码。整合了一下，有毛病接待指出。
1.正方形
#square{
width:100px;height:100px;background:red;}
2.长方形
#rectangle{width:200px;height:100px;background:red;}
3.左上三角
#triangle-topleft{width:0;height:0;border-top:100pxsolidred;border-right:100pxsolidtransparent;}
4.右上三角
#triangle-topright{width:0;height:0;border-top:100pxsolidred;border-left:100pxsolidtransparent;}
5.左下三角
#triangle-bottomleft{width:0;height:0;border-bottom:100pxsolidred;border-right:100pxsolidtransparent;}
6.右下三角
#triangle-bottomright{width:0;height:0;border-bottom:100pxsolidred;border-left:100pxsolidtransparent;}
7.平行四边形
#parallelogram{width:150px;height:100px;-webkit-transform:skew(20deg);-moz-transform:skew(20deg);-o-transform:skew(20deg);background:red;}
8.梯形
#trapezoid{border-bottom:100pxsolidred;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;height:0;width:100px;}
9.六角星
#star-six{width:0;height:0;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;border-bottom:100pxsolidred;position:relative;}#star-six:after{width:0;height:0;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;border-top:100pxsolidred;position:absolute;content:"";top:30px;left:-50px;}
10.五角星
#star-five{margin:50px0;position:relative;display:block;color:red;width:0px;height:0px;border-right:100pxsolidtransparent;border-bottom:70pxsolidred;border-left:100pxsolidtransparent;-moz-transform:rotate(35deg);-webkit-transform:rotate(35deg);-ms-transform:rotate(35deg);-o-transform:rotate(35deg);}#star-five:before{border-bottom:80pxsolidred;border-left:30pxsolidtransparent;border-right:30pxsolidtransparent;position:absolute;height:0;width:0;top:-45px;left:-65px;display:block;content:;-webkit-transform:rotate(-35deg);-moz-transform:rotate(-35deg);-ms-transform:rotate(-35deg);-o-transform:rotate(-35deg);}#star-five:after{position:absolute;display:block;color:red;top:3px;left:-105px;width:0px;height:0px;border-right:100pxsolidtransparent;border-bottom:70pxsolidred;border-left:100pxsolidtransparent;-webkit-transform:rotate(-70deg);-moz-transform:rotate(-70deg);-ms-transform:rotate(-70deg);-o-transform:rotate(-70deg);content:;}
11.五边形
#pentagon{position:relative;width:54px;border-width:50px18px0;border-style:solid;border-color:redtransparent;}#pentagon:before{content:"";position:absolute;height:0;width:0;top:-85px;left:-18px;border-width:045px35px;border-style:solid;border-color:transparenttransparentred;}
12.六边形
#hexagon{width:100px;height:55px;background:red;position:relative;}#hexagon:before{content:"";position:absolute;top:-25px;left:0;width:0;height:0;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;border-bottom:25pxsolidred;}#hexagon:after{content:"";position:absolute;bottom:-25px;left:0;width:0;height:0;border-left:50pxsolidtransparent;border-right:50pxsolidtransparent;border-top:25pxsolidred;}
13.桃心
#heart{position:relative;width:100px;height:90px;}#heart:before,#heart:after{position:absolute;content:"";left:50px;top:0;width:50px;height:80px;background:red;-moz-border-radius:50px50px00;border-radius:50px50px00;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:0100%;-moz-transform-origin:0100%;-ms-transform-origin:0100%;-o-transform-origin:0100%;transform-origin:0100%;}#heart:after{left:0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:100%100%;-moz-transform-origin:100%100%;-ms-transform-origin:100%100%;-o-transform-origin:100%100%;transform-origin:100%100%;}
14。无穷年夜标记
#infinity{position:relative;width:212px;height:100px;}
#infinity:before,#infinity:after{content:"";position:absolute;top:0;left:0;width:60px;height:60px;border:20pxsolidred;-moz-border-radius:50px50px050px;border-radius:50px50px050px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);}
#infinity:after{left:auto;right:0;-moz-border-radius:50px50px50px0;border-radius:50px50px50px0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);}
15.蛋
#egg{display:block;width:126px;height:180px;background-color:red;-webkit-border-radius:63px63px63px63px/108px108px72px72px;border-radius:50%50%50%50%/60%60%40%40%;}
16.提醒对话框
#talkbubble{width:120px;height:80px;background:red;position:relative;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}#talkbubble:before{content:"";position:absolute;right:100%;top:26px;width:0;height:0;border-top:13pxsolidtransparent;border-right:26pxsolidred;border-bottom:13pxsolidtransparent;}
17.十二角星
#burst-8{background:red;width:80px;height:80px;position:relative;text-align:center;-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-ms-transform:rotate(20deg);-o-transform:rotate(20eg);transform:rotate(20deg);}#burst-8:before{content:"";position:absolute;top:0;left:0;height:80px;width:80px;background:red;-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg);}
18.八角星
#burst-8{background:red;width:80px;height:80px;position:relative;text-align:center;-webkit-transform:rotate(20deg);-moz-transform:rotate(20deg);-ms-transform:rotate(20deg);-o-transform:rotate(20eg);transform:rotate(20deg);}#burst-8:before{content:"";position:absolute;top:0;left:0;height:80px;width:80px;background:red;-webkit-transform:rotate(135deg);-moz-transform:rotate(135deg);-ms-transform:rotate(135deg);-o-transform:rotate(135deg);transform:rotate(135deg);}
19.钻石
#cut-diamond{border-style:solid;border-color:transparenttransparentredtransparent;border-width:025px25px25px;height:0;width:50px;position:relative;margin:20px050px0;}#cut-diamond:after{content:"";position:absolute;top:25px;left:-25px;width:0;height:0;border-style:solid;border-color:redtransparenttransparenttransparent;border-width:70px50px050px;}
20.八卦
#yin-yang{width:96px;height:48px;background:#eee;border-color:red;border-style:solid;border-width:2px2px50px2px;border-radius:100%;position:relative;}
#yin-yang:before{content:"";position:absolute;top:50%;left:0;background:#eee;border:18pxsolidred;border-radius:100%;width:12px;height:12px;}
#yin-yang:after{content:"";position:absolute;top:50%;left:50%;background:red;border:18pxsolid#eee;border-radius:100%;width:12px;height:12px;}</p>
Table布局灵活性不大，你只能遵循tabletrtd的格式。而div你可以divulli也可以olli还可以ulli……但标准语法最好有序的写。
带来一篇CSS代码实例:用CSS代码写出的各类外形图形
Dreamweaver8中文版(dw)是由Macromedia公司开发的一款所见即所得的网页编辑器。和二维动画设计软件FLASH，专业网页图像设计软件FIREWORKS，并称为“网页三剑客”。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 滚动条)层属性--溢出(visible/hidden/scroll/auto) 不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。 可以使用 CSS 检查工具进行设计。
页:
[1]