css设置三角形_第1页
css设置三角形_第2页
css设置三角形_第3页
css设置三角形_第4页
css设置三角形_第5页
已阅读5页，还剩19页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"><html> <head> <title>设置三角.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my

2、page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!-<link rel="stylesheet" type="text/css" href="./styles.css">-><style type="text/css"> .div1 border-color: red green blue pink; bord

3、er-style: solid; border-width: 20px 20px 20px 20px; width: 0; height: 0; .div2 border-color: red transparent transparent transparent; border-style: solid; border-width: 20px 20px 0px 20px; width: 0; height: 0; .div3 border-color: transparent red transparent transparent; border-style: solid; border-w

4、idth: 20px 20px 20px 0px; width: 0; height: 0; .div4 border-color: transparent transparent transparent red; border-style: solid; border-width: 20px 0px 20px 20px; width: 0; height: 0; .div5 border-color: transparent transparent transparent red; border-style: solid; border-width: 20px 0px 20px 20px;

5、font-size: 0; line-height: 0; width: 0; height: 0; _border-top-color: white; _border-bottom-color: white; _filter: chroma( color =white); </style><style type="text/css"> #up width:0px; height:0px; border-bottom:10px solid #89b007; border-left:10px solid #fff; border-right:10px

6、solid #fff; #down width:0px; height:0px; border-top:10px solid #89b007; border-left:10px solid #fff; border-right:10px solid #fff; #left width:0px; height:0px; line-height:0px; /*解决ie出现梯形问题*/ border-right:10px solid #89b007; border-top:10px solid #fff; border-bottom:10px solid #fff; #right width:0px

7、; height:0px; line-height:0px; /*解决ie出现梯形问题*/ border-left:10px solid #89b007; border-top:10px solid #fff; border-bottom:10px solid #fff; #trapezoid width:7px; height:15px; border-bottom:10px solid #89b007; border-left:10px solid #fff; border-right:10px solid #fff; </style><style type="

8、text/css">.border_cort, .border_corr, .border_corb, .border_corl display: inline-block; width: 0; height: 0; border-width: 6px; overflow: hidden;.border_cort border-color: #333 transparent transparent; border-style: solid dotted dotted;.border_corr border-color: transparent #333 transparent

9、transparent; border-style: dotted solid dotted dotted;.border_corb border-color: transparent transparent #333; border-style: dotted dotted solid;.border_corl border-color: transparent transparent transparent #333; border-style: dotted dotted dotted solid;</style><style type="text/css&q

10、uot;>#div1 width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid red;#div2 width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 10px solid red;#div3 width: 0; height: 0; border-t

11、op: 5px solid transparent; border-right: 10px solid red; border-bottom: 5px solid transparent;#div4 width: 0; height: 0; border-top: 5px solid transparent; border-left: 10px solid red; border-bottom: 5px solid transparent;#div5 width: 0; height: 0; border-top: 10px solid red; border-right: 10px soli

12、d transparent;#div6 width: 0; height: 0; border-top: 10px solid red; border-left: 10px solid transparent; #div7 width: 0; height: 0; border-bottom: 10px solid red; border-right: 10px solid transparent;#div8 width: 0; height: 0; border-bottom: 10px solid red; border-left: 10px solid transparent;</

13、style><style>#test1width:50px; height:50px; border-width:50px; border-style:solid; border-color:#09F #990 #933 #0C9;#test2width:0; height:0; border-width:75px; border-style:solid; border-color:#09F #990 #933 #0C9;#test3 width:0; height:0; border-width:75px; border-style:solid; border-color:

14、#09F #990 #933 #0C9; font-size:0; line-height:0;#test4 width:0; height:0; border-width:75px; border-style:solid; border-color:#09F transparent transparent; font-size:0; line-height:0;#test5 width:0; height:0; border-width:75px; border-style:solid dashed dashed; border-color:#09F transparent transpar

15、ent; font-size:0; line-height:0;</style> </head> <body><br/><div class="div1"/></div><br/><div class="div2"/></div><br/><div class="div3"/></div><br/><div class="div4"/></di

16、v><br/><div class="div5"/></div><br/><div id="up"> </div><br/><div id="down"></div><br/><div id="left"></div><br/><div id="right"></div><br/><div id

17、="trapezoid"> </div><span class="border_cort"></span><span class="border_corb"></span><span class="border_corl"></span><span class="border_corr"></span><div id="div1"></div&g

18、t;<div id="div2"></div><div id="div3"></div><div id="div4"></div><div id="div5"></div><div id="div6"></div><div id="div7"></div><div id="div8"></div&

19、gt;<div id="test1"></div><div id="test2"></div><div id="test3"></div><div id="test4"></div><div id="test5"></div><style>.tag width:300px; height:100px; border:5px solid #09F; position:

20、relative;.tag emdisplay:block; border-width:20px; position:absolute; bottom:-40px; left:100px;border-style:solid dashed dashed; border-color:#09F transparent transparent;font-size:0; line-height:0;</style><div class="tag"> <em></em> CSS气泡框实现</div><style>

21、.tag1 width:300px; height:100px; border:5px solid #09F; position:relative; background-color:#FFF;.tag1 emdisplay:block; border-width:20px; position:absolute; bottom:-40px; left:100px;border-style:solid dashed dashed; border-color:#09F transparent transparent;font-size:0; line-height:0;.tag1 spandisp

22、lay:block; border-width:20px; position:absolute; bottom:-33px; left:100px;border-style:solid dashed dashed; border-color:#FFF transparent transparent;font-size:0; line-height:0;</style><br><br><br><div class="tag1"> <em></em> <span></span&

23、gt; CSS气泡框实现</div><style>.tag2 width:300px; height:100px;position:relative; background-color:#09F;margin-left:100px;.arrow position:absolute; width:70px; height:60px; left:-70px; bottom:10px;.arrow * display:block; position:absolute; border-style:dashed solid solid dashed; font-size:0; l

24、ine-height:0; .arrow emborder-color:transparent #09F #09F transparent; border-width:30px 35px;.arrow span border-width:20px 35px;border-color:transparent #FFF #FFF transparent; bottom:0;</style><br><br><br><div class="tag2"> <div class="arrow">

25、 <em></em><span></span> </div> CSS气泡框实现</div><style type="text/css" >/*圆角*/#divy1width:200px;height:40px;border-radius:10px;background-color:#399;/*画圆*/#divy2width:200px;height:200px;border-radius:100px;background-color:#399;/*控制部分角度为圆角,部分角度为直角*/#d

26、ivy3width:200px;height:200px;/*底部左角、底部右角变成圆角*/border-bottom-left-radius:20px;border-bottom-right-radius:20px;background-color:#399;/*画椭圆*/#divy4width:160px;height:200px;border-radius:80px;background-color:#399;/*画不规则图形*/#divy5width:200px;height:200px;border-top-left-radius:15px;border-top-right-radi

27、us:100px;border-bottom-left-radius:50px 80px; /*画弧线*/border-bottom-right-radius:20px;background-color:#399;</style>圆角：<br><div id='divy1'></div>css画圆：<br><div id='divy2'></div>控制个别角为圆角：<br><div id='divy3'></div>画椭圆：&

28、lt;br><div id='divy4'></div>画不规则图形：<br><div id='divy5'></div><style>import url('.shape float: left;display: inline;width: 100px;height: 100px;margin: 1px;padding: 50px;background: #1c1c1c;.shape:hover,.shape:focus background: #161616;</st

29、yle><div class="shape"><div class="square-color"></div></div><div class="shape"><div class="square"></div></div><div class="shape"><div class="square-round-one"></div><

30、/div><div class="shape"><div class="square-round-two"></div></div><div class="shape"><div class="square-round-three"></div></div><div class="shape"><div class="square-round-half"&g

31、t;</div></div><div class="shape"><div class="circle"></div></div><div class="shape"><div class="diamond"></div></div><div class="shape"><div class="diamond-cut"></di

32、v></div><div class="shape"><div class="rhombus"></div></div><div class="shape"><div class="trapezoid"></div></div><div class="shape"><div class="pentagon"></div><

33、/div><div class="shape"><div class="hexagon"></div></div><div class="shape"><div class="octagon"></div></div><div class="shape"><div class="rectangle"></div></div>&l

34、t;div class="shape"><div class="parallelogram-left"></div></div><div class="shape"><div class="parallelogram-right"></div></div><div class="shape"><div class="heart"></div></

35、div><div class="shape"><div class="triangle"></div></div><div class="shape"><div class="triangle-down"></div></div><div class="shape"><div class="triangle-left"></div><

36、/div><div class="shape"><div class="triangle-right"></div></div><div class="shape"><div class="triangle-left-top"></div></div><div class="shape"><div class="triangle-right-top">

37、</div></div><div class="shape"><div class="triangle-left-bottom"></div></div><div class="shape"><div class="triangle-right-bottom"></div></div><div class="shape"><div class="ar

38、row-up"></div></div><div class="shape"><div class="arrow-down"></div></div><div class="shape"><div class="arrow-left"></div></div><div class="shape"><div class="arrow-r

39、ight"></div></div><div class="shape"><div class="circle-spin-half"></div></div><div class="shape"><div class="oval"></div></div><div class="shape"><div class="circle-ha

40、lf-top"></div></div><div class="shape"><div class="circle-half-bottom"></div></div><div class="shape"><div class="circle-half-left"></div></div><div class="shape"><div class

41、="circle-half-right"></div></div><div class="shape"><div class="circle-quarter-left-top"></div></div><div class="shape"><div class="circle-quarter-right-top"></div></div><div class=&qu

42、ot;shape"><div class="circle-quarter-left-bottom"></div></div><div class="shape"><div class="circle-quarter-right-bottom"></div></div><div class="shape"><div class="circle-wedge-top"></

43、div></div><div class="shape"><div class="circle-wedge-bottom"></div></div><div class="shape"><div class="circle-wedge-left"></div></div><div class="shape"><div class="circle-wedge-right"></div></div><div class="shape"><div class="flower"></div></div><div class="shape"><div class=&quo

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论