Special CSS Styles

Div in a certain range of size changes

. div{width:auto;height:auto;min-height:100px;min-width:100px;max-height:200px;max-width:200px;}

Round CSS Style

. A{width:400px;height:400px;background-color: #06F; top:800px;left:800px;-moz-border-radius:200px;- webkit-border-radius:200px;border-radius:200px;}

Triangle

<style>.t{  width:50px;  Border-style:solid;  Border-color: #a6a2f7 #fff;  border-width:0 50px 50px 50px;} </style>

Div implements scrollbars (in some cases alternative to IFRAME)

<STYLE>.GB {overflow:auto; white-space:normal; height:100px; padding:3px;} </style><div class= "GB" ></div>

Height and overflow must be set!

PS: Under IE sometimes the horizontal scroll bar will come out, but in fact, the horizontal scroll bar does not have the actual use, seemingly this is IE bug, solution: Overflow-x: Hidden

Add this. Hide the horizontal scroll bar

Elliptic

. B{width:400px;height:200px;background: #FF0;-moz-border-radius:200px/100px;-webkit-border-radius:200px/100px; border-radius:200px/100px;}

Upper Triangle

#triangle-up {width:0;height:0;border-left:50px solid transparent;border-right:50px solid Transparent;border-bottom : 100px solid Red;}

Parallelogram

#parallelogram {Width:150px;height:100px;margin-left:20px;-webkit-transform:skew (20deg);-moz-transform:skew ( 20DEG);-o-transform:skew (20deg); background:red;}

Trapezoidal

#trapezoid {border-bottom:100px Solid red;border-left:50px solid transparent;border-right:50px solid transparent; height:0;width:100px;}

Hex shape

#star-six {width:0;height:0;border-left:50px solid transparent;border-right:50px solid Transparent;border-bottom: 100px solid red;position:relative;} #star-six:after {width:0;height:0;border-left:50px solid transparent;border-right:50px solid Transparent;border-top : 100px solid red;position:absolute;content: ""; Top:30px;left: -50px;}

Pentagram

#star-five {margin:50px 0;position:relative;display:block;color:red;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:80px solid red;border-left:30px solid transparent;border-right:30px Solid Transparent;position:absolute;height:0;width:0;top: -45px;left: -65px;display:block;content: "-webkit-transform : Rotate ( -35deg);-moz-transform:rotate ( -35deg);-ms-transform:rotate ( -35deg);-o-transform:rotate ( -35deg);} #star-five:after {position:absolute;display:block;color:red;top:3px;left: -105px;width:0px;height:0px; border-right:100px solid transparent;border-bottom:70px solid red;

Pentagon

#pentagon {position:relative;width:54px;border-width:50px 18px 0;border-style:solid;border-color:red transparent;} #pentagon: Before {content: "";p osition:absolute;height:0;width:0;top: -85px;left: -18px;border-width:0 45px 35px; Border-style:solid;border-color:transparent transparent red;}

Hexagon

#hexagon {width:100px;height:55px;background:red;position:relative;} #hexagon: Before {content: "";p Osition:absolute;top: -25px;left:0;width:0;height:0;border-left:50px Solid transparent;border-right:50px solid transparent;border-bottom:25px solid red;} #hexagon: After {content: "";p Osition:absolute;bottom: -25px;left:0;width:0;height:0;border-left:50px Solid transparent;border-right:50px solid transparent;border-top:25px solid red;}

Heart shape

#heart {position:relative;width:100px;height:90px;} #heart: Before, #heart: after {position:absolute;content: ""; left:50px;top:0;width:50px;height:80px;background:red; -moz-border-radius:50px 50px 0 0;border-radius:50px 50px 0 0;-webkit-transform:rotate ( -45deg);-moz-transform:rotate ( -45DEG);-ms-transform:rotate ( -45deg);-o-transform:rotate ( -45deg); transform:rotate ( -45deg);- webkit-transform-origin:0 100%;-moz-transform-origin:0 100%;-ms-transform-origin:0 100%;-o-transform-origin:0 100% ; transform-origin:0 100%;} #heart: After {left:0;-webkit-transform:rotate (45deg);-moz-transform:rotate (45deg);-ms-transform:rotate (45DEG) ;-o-transform:rotate (45deg); transform:rotate (45deg);-webkit-transform-origin:100% 100%;-moz-transform-origin: 100% 100%;-ms-transform-origin:100% 100%;-o-transform-origin:100% 100%;transform-origin:100% 100%;}

Egg

#egg {display:block;width:126px;height:180px;background-color:red;-webkit-border-radius:63px 63px 63px 63px/108px 1 08px 72px 72px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;}

Prompt dialog box

#talkbubble {width:120px;height:80px;background:red;position:relative;-moz-border-radius:10px;- webkit-border-radius:10px;border-radius:10px;} #talkbubble: Before {content: "";p osition:absolute;right:100%;top:26px;width:0;height:0;border-top:13px Solid TRANSPARENT;BORDER-RIGHT:26PX solid red;border-bottom:13px solid transparent;}

Tai chi

#yin-yang {width:96px;height:48px;background: #eee; border-color:red;border-style:solid;border-width:2px 2px 50px 2px;border-radius:100%;p osition:relative;} #yin-yang:before {content: "";p osition:absolute;top:50%;left:0;background: #eee; border:18px solid Red;border-radius : 100%;width:12px;height:12px;} #yin-yang:after {content: ";p osition:absolute;top:50%;left:50%;background:red;border:18px solid #eee; border-radius:100%;width:12px;height:12px;}

Diamond

#cut-diamond {border-style:solid;border-color:transparent transparent red transparent;border-width:0 25px 25px 25px; height:0;width:50px;position:relative;margin:20px 0 50px 0;} #cut-diamond:after {content: "";p osition:absolute;top:25px;left: -25px;width:0;height:0;border-style:solid; border-color:red Transparent transparent transparent;border-width:70px 50px 0 50px;}

Special CSS Styles