CSS实现圆角三角五角星五边形爱心12角星8角星圆椭圆圆圈八卦等剖析Word文件下载.docx

CSS实现圆角三角五角星五边形爱心12角星8角星圆椭圆圆圈八卦等剖析Word文件下载.docx

《CSS实现圆角三角五角星五边形爱心12角星8角星圆椭圆圆圈八卦等剖析Word文件下载.docx》由会员分享，可在线阅读，更多相关《CSS实现圆角三角五角星五边形爱心12角星8角星圆椭圆圆圈八卦等剖析Word文件下载.docx（17页珍藏版）》请在冰豆网上搜索。

100px;

/*-webkit-border-radius:

*/

-moz-border-radius:

4.圈

#circle{

black;

10px;

/*-moz-border-radius:

border:

3pxredsolid;

5.椭圆

#ellipse{

100px/50px;

6.上三角

#triangle-up{

0px;

border-left:

50pxsolidtransparent;

border-right:

border-bottom:

100pxsolidred;

/*-webkit-border-top-left-radius:

/*-webkit-border-top-right-radius:

/*-webkit-border-bottom-left-radius:

/*-webkit-border-bottom-right-radius:

7.下三角

#triangle-down{

border-top:

border-right:

8.左三角

#triangle-left{

border-bottom:

9.右三角

#triangle-right{

10.顶左

#triangle-topleft{

100pxsolidtransparent;

11.顶右

#triangle-topright{

100solidred;

100solidtransparent;

12.底左

#triangle-bottomleft{

13.底右

#triangle-bottomright{

14.平行四边形

#parallelogram{

150px;

margin-left:

30px;

-webkit-transform:

skew（-30deg）;

-moz-transform:

skew（200deg）;

-o-transform:

15.

#trapezoid{

16.#star-five{

0;

margin:

50px0;

position:

relative;

display:

block;

70pxsolidred;

-moz-transfrom:

rotate（35deg）;

-ms-transform:

#star-five:

before{

30pxsolidtransparent;

80pxsolidred;

absolute;

top:

-45px;

left:

-65px;

content:

"

"

;

rotate（-35deg）;

after{

3px;

-105px;

rotate（-70deg）;

17.#star-six{

#star-six:

-50px;

18.#pentagon{

54px;

border-width:

50px18px0;

border-style:

solid;

border-color:

redtransparent;

#pentagon:

-85px;

-18px;

045px35px;

transparenttransparentred;

19.#hexagon{

55px;

#hexagon:

-25px;

;

25pxsolidred;

bottom:

20.#octagon{

#octagon:

42px;

29pxsolid#eee;

29pxsolidred;

21#heart{

90px;

#heart:

before,#heart:

80px;

50px50px00;

50px50px00;

rotate（-45deg）;

transform:

-webkit-transform-origin:

0100%;

-ms-transform-origin:

-moz-transform-origin:

-o-transform-origin:

tansform-origin:

rotate（45deg）;

100%100%;

transform-origin:

22.#infinity{

212px;

#infinity:

before,#infinity:

60px;

20pxsolidred;

50px50px050px;

-webkit-border-radius:

50px50px050px;

auto;

right:

50px50px50px0;

50px50px50px0;

23.#egg{

126px;

180px;

50%50%50%50%/60%60%40%40%;

50%50%50%50%/60%60%40%40%;

24.#pacman{

60pxsolidtransparent;

60pxsolidred;

border-top-left-radius:

border-top-right-radius:

border-bottom-left-radius:

border-bottom-right-radius:

25.#talkbubble{

10px;

-ms-border-radius:

-o-border-radius:

#talkbubble:

100%;

15pxsolidtransparent;

30pxsolidred;

26.#burst-12{

#burst-12:

before,#burst-12:

rotate（30deg）;

rotate（60deg）;

27.#burst-8{

rotate（20deg）;

#burst-8:

rotate（135deg）;

29.#diamond{

transparenttransparentredtransparent;

025px25px25px;

20px050px0;

#diamond:

25px;

redtransparenttransparenttransparent;

70px50px050px;

30.#yin-yang{

wi