css3 cheatsheet,CSS3常用图形.cheatsheet-css-shapes

C h e a t S h e e t C S S S i mp l e S h a p e s

ma d e b y l a n d o f w e b . c o m

< d i v i d = " s q u a r e " > < / d i v > # s q u a r e { w i d t h : 1 0 0 p x ; h e i g h t : 1 0 0 p x ; b a c k g r o u n d : b l u e ; }

< d i v i d = " p a r a l l e l o g r a m" > < / d i v > # p a r a l l e l o g r a m{ w i d t h : 1 0 0 p x ; h e i g h t : 7 0 p x ; b a c k g r o u n d : b l u e ; mo z t r a n s f o r m: s k e w ( 2 0 d e g ) ; o t r a n s f o r m: s k e w ( 2 0 d e g ) ; t r a n s f o r m: s k e w ( 2 0 d e g ) ; }

< d i v i d = " p a r a l l e l o g r a m2 " > < / d i v > # p a r a l l e l o g r a m2{ w i d t h : 1 0 0 p x ; h e i g h t : 7 0 p x ; b a c k g r o u n d : b l u e ; mo z t r a n s f o r m: s k e w ( 2 0 d e g ) ; o t r a n s f o r m: s k e w ( 2 0 d e g ) ; t r a n s f o r m: s k e w ( 2 0 d e g ) ; } < d i v i d = " d i a mo n d " > < / d i v > # d i a mo n d{ w i d t h : 8 0 p x ; h e i g h t : 8 0 p x ; b a c k g r o u n d : b l u e ; ma r g i n : 3 p x003 0 p x ; w e b k i t t r a n s f o r m: r o t a t e ( 4 5 d e g ) ; mo z t r a n s f o r m: r o t a t e ( 4 5 d e g ) ; ms t r a n s f o r m: r o t a t e ( 4 5 d e g ) ; o t r a n s f o r m: r o t a t e ( 4 5 d e g ) ; t r a n s f o r m: r o t a t e ( 4 5 d e g ) ; w e b k i t t r a n s f o r mo r i g i n : 01 0 0 % ; mo z t r a n s f o r mo r i g i n : 01 0 0 % ; ms t r a n s f o r mo r i g i n : 01 0 0 % ; o t r a n s f o r mo r i g i n : 01 0 0 % ; t r a n s f o r mo r i g i n : 01 0 0 % ; }

w e b k i t t r a n s f o r m: s k e w ( 2 0 d e g ) ; w e b k i t t r a n s f o r m: s k e w ( 2 0 d e g ) ; -

< d i v i d = " r e c t a n g l e " > < / d i v > # r e c t a n g l e { w i d t h : 1 0 0 p x ; h e i g h t : 6 0 p x ; b a c k g r o u n d : b l u e ; }

< d i v i d = " t r a p e z " > < / d i v > # t r a p e z { h e i g h t : 0 ; w i d t h : 1 0 0 p x ;

< d i v i d = " t r a p e z 2 " > < / d i v > # t r a p e z 2 { h e i g h t : 0 ; w i d t h : 1 0 0 p x ;

< d i v i d = " t r a p e z 3 " > < / d i v > # t r a p e z 3 { w i d t h : 0 ; b o r d e r r i g h t : 1 0 0 p xs o l i dg r e e n ; b o r d e r t o p : 6 0 p xs o l i dt r a n s p a r e n t ; h e i g h t : 1 0 0 p x ;

< d i v i d = " t r a p e z 4 " > < / d i v > # t r a p e z 4 { w i d t h : 0 ; b o r d e r l e f t : 1 0 0 p xs o l i dg r e e n ; b o r d e r t o p : 6 0 p xs o l i dt r a n s p a r e n t ; h e i g h t : 1 0 0 p x ;

o r d e r t o p : 1 0 0 p xs o l i dg r e e n ; b o r d e r b o t t o m: 1 0 0 p xs o l i dg r e e n ;b

o r d e r l e f t : 6 0 p xs o l i dt r a n s p a r e n t ; b o r d e r l e f t : 6 0 p xs o l i dt r a n s p a r e n t ;b

o r d e r b o t t o m: 6 0 p xs o l i dt r a n s p a r e n t ; o r d e r r i g h t : 6 0 p xs o l i dt r a n s p a r e n t ;b o r d e r b o t t o m: 6 0 p xs o l i dt r a n s p a r e n t ; b o r d e r r i g h t : 6 0 p xs o l

i dt r a n s p a r e n t ;b } } } }

< d i v i d = " t r i a n g l e U p " > < / d i v > # t r i a n g l e U p{ w i d t h