纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)【转】
12345678910111213141516171819202122232425262728293031323334#yin-yang {
????
width
:
96px
;
????
height
:
48px
;
????
background
:
#eee
;
????
border-color
:
red
;
????
border-style
:
solid
;
????
border-width
:
2px
2px
50px
2px
;
????
border-radius:
100%
;
????
position
:
relative
;
}
?#yin-yang:before {
????
content
:
""
;
????
position
:
absolute
;
????
top
:
50%
;
????
left
:
0
;
????
background
:
#eee
;
????
border
:
18px
solid
red
;
????
border-radius:
100%
;
????
width
:
12px
;
????
height
:
12px
;
}
?#yin-yang:after {
????
content
:
""
;
????
position
:
absolute
;
????
top
:
50%
;
????
left
:
50%
;
????
background
:
red
;
????
border
:
18px
solid
#eee
;
????
border-radius:
100%
;
????
width
:
12px
;
????
height
:
12px
;
}
好了,就到这里了,一共28个,个人觉得后面几个比较犀利。这些代码的来源是css-tricks。由青藤屋博客整理,转载请保留原文链接:
http://www.itivy.com/ivy/archive/2012/1/16/css-shape.html