CSS3 圆形
#css3-circle {
너비 : 150px;
높이 : 150px;
국경-라디우스 : 50%;
배경색 : #232323;}
CSS3 椭圆形
#css3-elipse {
너비 : 200px;
높이 : 100px;
국경-라디우스 : 50%;
배경색 : #232323;}
CSS3 三角形
#CSS3- 트라이앵글 {
너비 : 0;
높이 : 0;
좌파 : 100px 고체 투명;
경계 오른쪽 : 100px 고체 투명;
Border-Bottom : 150px Solid #232323;}
CSS3 平行四边形
#css3-parallelogram {
너비 : 200px;
높이 : 100px;
배경 : #232323;
-webkit-transform : ske (-45deg);-Moz-transform : ske (-45deg);-o- 변형 : skew (-45deg);
변환 : Skew (-45deg);
}
CSS3 梯形
#css3-trapezoid {
너비 : 100px;
높이 : 0;
국경 바닥 : 100px 고체 #232323;
왼쪽 경계 : 50px 고체 투명;
경계 오른쪽 : 50px 고체 투명;
}
CSS3 六角星
#css3-six-star {
너비 : 0;
높이 : 0;
위치 : 상대;
국경 바닥 : 100px 고체 #232323;
왼쪽 경계 : 50px 고체 투명;
경계 오른쪽 : 50px 고체 투명;
}#css3-six-star : {이후 {
콘텐츠: ;
너비 : 0;
높이 : 0;
위치 : 절대;
왼쪽 : -50px;
상단 : 35px;
테두리 : 100px 솔리드 #232323;
왼쪽 경계 : 50px 고체 투명;
경계 오른쪽 : 50px 고체 투명;
}
CSS3 五角星
#css3-- 시작 {
너비 : 0px;
높이 : 0px;
여백 : 50px 0;
위치 : 상대;
디스플레이 : 블록;
색상 : #232323;
경계 오른쪽 : 100px 고체 투명;
국경-바닥 : 70px 고체 #232323;
경계-왼쪽 : 100px 고체 투명; -Moz 변환 : 회전 (35deg);-WebKit-Transform : 회전 (35deg);-MS-Transform : 회전 (35deg);-O- 변형 : 회전 (35deg);
}#css3-five-star : prection {
국경 바닥 : 80px Solid #232323 ;;
왼쪽 경계 : 30px 고체 투명;
경계 오른쪽 : 30px 고체 투명;
위치 : 절대;
높이 : 0;
너비 : 0;
상단 : -45px;
왼쪽 : -63px;
디스플레이 : 블록;
내용 : ''; -webkit-transform : 회전 (-35deg);-Moz-Transform : 회전 (-35deg);-MS-Transform : 회전 (-35deg);-O- 변환 : 회전 (-35deg);
}#css3-five-star : {이후 {
위치 : 절대;
디스플레이 : 블록;
색상 : #232323;
상단 : 3px;
왼쪽 : -105px;
너비 : 0px;
높이 : 0px;
경계 오른쪽 : 100px 고체 투명;
국경-바닥 : 70px 고체 #232323;
경계-왼쪽 : 100px 고체 투명; -webkit 변환 : 회전 (-70deg);-Moz-Transform : 회전 (-70deg);-ms-transform : 회전 (-70deg);-O- 트랜스포트 : 회전 (-70deg );
콘텐츠: '';
}
CSS3 五边形
#css3-pentagon {
위치 : 상대;
너비 : 54px;
테두리-width : 50px 18px 0;
국경 스타일 : 단단한;
국경 색상 : #232323 투명;} #css3-pentagon : 이전 {{
콘텐츠: ;
위치 : 절대;
높이 : 0;
너비 : 0;
상단 : -85px;
왼쪽 : -18px;
국경비 : 0 45px 35px;
국경 스타일 : 단단한;
국경 색 : 투명한 투명 #232323;}
CSS3 六边形
#CSS3-Hexagon {
너비 : 100px;
높이 : 55px;
배경 : #232323;
위치 : 상대;
}#css3-hexagon : 이전 {{
콘텐츠: ;
위치 : 절대;
상단 : -25px;
왼쪽 : 0;
너비 : 0;
높이 : 0;
왼쪽 경계 : 50px 고체 투명;
경계 오른쪽 : 50px 고체 투명;
국경 바닥 : 25px 고체 #232323; }#css3-hexagon : {이후 {
콘텐츠: ;
위치 : 절대;
하단 : -25px;
왼쪽 : 0;
너비 : 0;
높이 : 0;
왼쪽 경계 : 50px 고체 투명;
경계 오른쪽 : 50px 고체 투명;
테두리 : 25px 솔리드 #232323; }
CSS3 心形
#css3-heart {
위치 : 상대;
너비 : 100px;
높이 : 90px;
} #css3-heart : 전, #css3-heart : 이후 {
위치 : 절대;
콘텐츠: ;
왼쪽 : 50px;
상단 : 0;
너비 : 50px;
높이 : 80px;
배경 : #232323;
-Moz 통과-라디우스 : 50px 50px 0 0;
Border-Radius : 50px 50px 0 0; -webkit-transform : 회전 (-45deg);-Moz-transform : rotate (-45deg);-ms-transform : rotate (-45deg);-O- 트랜스포트 : 회전 (-회전). 45deg);
변환 : 회전 (-45deg);-Webkit-Transform-Origin : 0 100%;-Moz-Transform-Origin : 0 100%;-MS- 변환-오리 진 : 0 100%;-O- 트랜스 포트-오리진 : 0 100 %;
변환-오리진 : 0 100%;
}#css3-heart : {이후 {
왼쪽 : 0; -webkit-transform : 회전 (45deg);-Moz-transform : 회전 (45deg);-MS-Transform : 회전 (45deg);-O- 변환 : 회전 (45deg);
변환 : 회전 (45deg);-Webkit-Transform-Origin : 100% 100%;-Moz-Transform-Origin : 100% 100%;-MS- 변환-오리 진 : 100% 100%;-O- 트랜스 폼-오리진 : 100% 100%;
변환-오리진 : 100% 100%;
}
CSS3 八卦
#css3-gossip {
너비 : 96px;
높이 : 48px;
배경 : #f1f1f1;
국경 색 : #232323;
국경 스타일 : 단단한;
국경비 : 2px 2px 50px 2px;
Border-Radius : 100%;
위치 : 상대;
}#css3-gossip : 이전 {
콘텐츠: ;
위치 : 절대;
상단 : 50%;
왼쪽 : 0;
배경 : #f1f1f1;
테두리 : 18px 솔리드 #232323;
Border-Radius : 100%;
너비 : 12px;
높이 : 12px;
}#css3-gossip : {이후 {
콘텐츠: ;
위치 : 절대;
상단 : 50%;
왼쪽 : 50%;
배경 : #232323;
테두리 : 18px 고체 #f1f1f1;
Border-Radius : 100%;
너비 : 12px;
높이 : 12px;
}