CSS-Summary of various basic graphical representations (css3.0)

Basic settings: Width and height

1. Square, Rectangular

Triangular corners with border words

Use Transform:skew (x angle,y angle): To draw parallelogram with the X and Y axes tilted

. square{width:100px;height:100px;background:red;}
/* Squares can also */
/*{width:0px;height:0px;border:50px solid Red;} */
. Rectangle{width:200px;height:100px;background:green;}

2. Various triangles

. triangle1{width:0px;height:0px;border:50px solid transparent;border-top:50px solid pink;}. triangle2{width:0px;height:0px;border:50px solid transparent;border-right:50px solid purple;}. triangle3{width:0px;height:0px;border:50px solid transparent;border-bottom:50px solid blue;}. triangle4{width:0px;height:0px;border:50px solid transparent;border-left:50px solid lightblue;}. triangle{width:0px;height:0px;border:50px Solid transparent;border-top:50px solid red;border-right:50px solid Yellow ; border-bottom:50px solid green;border-left:50px solid Orange;}

3. Left/Right/up/down

. triangle5{width:0px;height:0px;border:50px solid transparent;border-left:50px solid #e4f; border-top:50px Solid #e4f ;}. triangle6{width:0px;height:0px;border:50px solid transparent;border-right:50px solid #cde; border-top:50px Solid #cde ;}. triangle7{width:0px;height:0px;border:50px solid transparent;border-left:50px solid #c20; border-bottom:50px Solid # C20;}. triangle8{width:0px;height:0px;border:50px solid transparent;border-right:50px solid #ee3; border-bottom:50px Solid # Ee3;}

4. Pentagram

Consisting of three non-equilateral triangle

Consists of rotating transform:rotate (angle) and absolute positioning Top,left,right,bottom

#star-five {margin:50px 0;position:relative;width:0px;height:0px;border-right:100px solid transparent; border-bottom:70px Solid red;border-left:100px Solid transparent;-moz-transform:rotate (35deg);-webkit-transform: Rotate (35deg);-ms-transform:rotate (35deg);-o-transform:rotate (35deg);} #star-five:before {border-bottom:70px solid red;border-left:100px solid transparent;border-right:100px Solid Transparent;position:absolute;height:0;width:0;top: -0px;left: -99px;display:block;content: "-webkit-transform: Rotate (75deg);-moz-transform:rotate (75deg);-ms-transform:rotate (75deg);-o-transform:rotate (75deg);} #star-five:after {position:absolute;display:block;top:3px;left: -105px;width:0px;height:0px;border-right:100px Solid transparent;border-bottom:70px Solid red;border-left:100px solid transparent;-webkit-transform:rotate ( -70DEG) ;-moz-transform:rotate ( -70deg);-ms-transform:rotate ( -70deg);-o-transform:rotate ( -70deg); content: ';}

5. Parallelogram

. Parallelogram{width:100px;height:100px;background: #ec3;-webkit-transform:skew ( -20deg);-moz-transform:skew (- 20DEG);-o-transform:skew ( -20deg);-ms-transform:skew ( -20deg);}

6. Various round (with Border-radius to set and border-width to control)

. circle1-1{width:0px;height:0px;border-radius:80px; border-right:80px solid red;border-left:80px solid yellow; border-top:80px solid blue;border-bottom:80px solid pink;}. Circle1-2{width:100px;height:100px;background: #fff; border-radius:100px border:20px solid #699}/* Upper semicircle */.circle1-3{ width:100px;   height:0px;border:0 solid transparent;border-top:100px solid #439; border-right:100px solid #439;  -moz-border-radius:100px 100px 0 0;-webkit-border-radius:100px 100px 0 0; border-radius:100px 100px 0 0;} /* Lower semicircular */.circle1-4{width:100px;height:0px;border-radius:0 0 100px 100px;-webkit-border-radius:0 0 100px 100px;-moz-border-radius:0 0 100px 100px;-ms-border-radius:0 0 100px 100px;-o-border-radius:0 0 100px 100px;border:0px Solid red;border-bottom:100px solid #767; border-left:100px solid #767;} /* Left semicircle */.circle1-5{width:0px;height:100px;border-radius:100px 0 0 100px;-webkit-border-radius:100px 0 0 100px;- moz-border-radius:100px 0 0 100px;-o-border-radius:100px 0 0 100px;-ms-border-radius:100px 0 0 100px;border:0px Solid transparent;border-top:100px solid #345; border-left:100px solid #345;} /* Right semicircle */.circle1-6{width:0px;height:100px;border-radius:0 100px 100px 0;-webkit-border-radius:0 100px 100px 0;-o-border-radius:0 100px 100px 0;-ms-border-radius:0 100px 100px 0;-moz-border-radius:0 100px 100px 0;border:0px Solid transparent;border-right:100px solid #100; border-bottom:100px solid #100;} /* One-fourth round */.circle1-7{width:100px;height:0px;border-radius:100px in upper left corner 0 0 0;-webkit-border-radius:100px 0 0 0;- moz-border-radius:100px 0 0 0;-o-border-radius:100px 0 0 0;-ms-border-radius:100px 0 0 0;border:0px Solid Transparent;bor der-top:100px solid #924;} /* Right half One-fourth round */.circle1-8{width:0px;height:100px;border-radius:0 100px 0 0;-webkit-border-radius:0 100px 0 0;-moz-border-radius:0 100px 0 0;border:0px Solid transparent;border-right:100px solid #578;} /* Next half One-fourth round */.circle1-9{width:0px;height:100px;border-radius:0 0 0 100px;-webkit-border-radius:0 0 0 100px;-moz-border-radius:0 0 0 100px;border:0px soLid transparent;border-left:100px solid #f81;} /* Left half One-fourth round */.circle1-10{width:100px;height:0px;border-radius:0 0 100px 0;-webkit-border-radius:0 0 100px 0;-moz-border-radius:0 0 100px 0;border:0px Solid red;border-bottom:100px solid #185;}

7. dialog box with prompt type

. hint1{width:180px;height:100px;border-radius:30px;background:purple;position:relative;}. Hint1:after{content: ""; border:0 solid transparent; border-bottom:25px Solid purple;-moz-border-radius:0 0 0 200px;-webkit-border-radius:0 0 0 200px;border-radius:0 0 0 200px;width:40px;height:40px;-webkit-transform:rotate ( -90deg); -moz-transform:rotate ( -90DEG); -ms-transform:rotate ( -90DEG); -o-transform:rotate ( -90deg);p osition:absolute;top:85px;}. Hint2{width:180px;height:120px;border-radius:180px/120px;background: #f12;p osition:relative;}. Hint2:after{content: ""; border:0 solid transparent; border-bottom:25px solid #f12;-moz-border-radius:0 0 0 200px;-webkit-border-radius:0 0 0 200px;border-radius:0 0 0 200px;width:40px;height:40px;-webkit-transform:rotate ( -90deg); -moz-transform:rotate ( -90DEG); -ms-transform:rotate ( -90DEG); -o-transform:rotate ( -90deg);p osition:absolute;top:85px;left:5px;}

8. Various capsule types (oval of different border-radius) and love made of capsules

. Jiaonang1{width:250px;height:100px;background: #ec2; border-radius:50px;}. Jiaonang2{width:100px;height:250px;background: #ec2; border-radius:50px;}. Jiaonang3{width:100px;height:150px;background: #ec2; border-radius:50px 50px 0 0px;}. Jiaonang4{width:100px;height:150px;background: #ec2; border-radius:0 0 50px 50px;}. heart{width:100px;height:150px;background:red;border-radius:50px 50px 0 0;-moz-transform:rotate (45deg);- Webkit-transform:rotate (45deg);p osition:relative;}. heart:after{width:100px;height:150px;background:red;border-radius:50px 50px 0 0;-moz-transform:rotate ( -90deg);- Webkit-transform:rotate ( -90deg);p osition:absolute;content: ""; top:26px;left:-25px;}

CSS-Summary of various basic graphical representations (css3.0)