css設(shè)置三角形_第1頁
css設(shè)置三角形_第2頁
css設(shè)置三角形_第3頁
css設(shè)置三角形_第4頁
css設(shè)置三角形_第5頁
已閱讀5頁，還剩19頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、<!DOCTYPE HTML PUBLIC "-/W3C/DTD HTML 4.01 Transitional/EN"><html> <head> <title>設(shè)置三角.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出現(xiàn)梯形問題*/ 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出現(xiàn)梯形問題*/ 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氣泡框?qū)崿F(xiàn)</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氣泡框?qū)崿F(xiàn)</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氣泡框?qū)崿F(xiàn)</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;/*畫不規(guī)則圖形*/#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>控制個(gè)別角為圓角：<br><div id='divy3'></div>畫橢圓：&

28、lt;br><div id='divy4'></div>畫不規(guī)則圖形：<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等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論