1 <!doctype html> 2 <html> 3 <head> 4 <title></title> 5 <meta charset='utf-8'> 6 <style type="text/css"> 7 :root,body{ 8 height: 100%; 9 width: 100%; 10 } 11 .z{ 12 width:200px; 13 height: 400px; 14 left: 400px; 15 position: absolute; 16 } 17 .z div{ 18 position: absolute; 19 20 } 21 .z .red{ 22 background-color: red; 23 box-shadow: 0px 0px 1px 0 #666; 24 } 25 .f1{ 26 width: 18px; 27 height: 18px; 28 -webkit-transform: rotate(45deg); 29 -moz-transform: rotate(45deg); 30 -ms-transform: rotate(45deg); 31 -o-transform: rotate(45deg); 32 transform: rotate(45deg); 33 top:0; 34 border-radius: 2px; 35 } 36 .l1,.l2,.l3,.l4{ 37 width:2px; 38 height: 10px; 39 } 40 .c1{ 41 width:14px; 42 height: 14px; 43 border-radius: 7px; 44 box-shadow: 0px 0px 1px 0 #666; 45 z-index: 10; 46 } 47 .c1-1 { 48 position: relative; 49 width: 40px; 50 height: 12px; 51 } 52 .c1-1:before, 53 .c1-1:after { 54 box-shadow: 0px 0px 1px 0 #666; 55 content: ""; 56 position: absolute; 57 top: 0; 58 left: 0; 59 width: 8px; 60 height: 14px; 61 border: 2px solid red; 62 border-radius:50% 50% 50% 50% / 30% 30% 70% 70%; 63 -webkit-transform: rotate(-90deg); 64 -moz-transform: rotate(-90deg); 65 -ms-transform: rotate(-90deg); 66 -o-transform: rotate(-90deg); 67 transform: rotate(-90deg); 68 } 69 70 .c1-1:after { 71 left: auto; 72 right: 0; 73 border-radius:50% 50% 50% 50% / 70% 70% 30% 30%; 74 -webkit-transform: rotate(-90deg); 75 -moz-transform: rotate(-90deg); 76 -ms-transform: rotate(-90deg); 77 -o-transform: rotate(-90deg); 78 transform: rotate(-90deg); 79 } 80 .r{ 81 width:80px; 82 height: 80px; 83 z-index: 10; 84 -webkit-transform: rotate(45deg); 85 -moz-transform: rotate(45deg); 86 -ms-transform: rotate(45deg); 87 -o-transform: rotate(45deg); 88 transform: rotate(45deg); 89 } 90 .r .ro{ 91 position: relative; 92 display: table; 93 border-collapse:separate; 94 border-spacing: 1px; 95 } 96 .r .b{ 97 width:15px; 98 height: 14px; 99 position: relative;100 display: table-cell;101 border-radius: 2px;102 }103 .c2{104 width:10px;105 height: 10px;106 border-radius: 5px;107 }108 .c3{109 width:10px;110 height: 10px;111 border-radius: 5px 5px 0 0;112 }113 .c4{114 width:14px;115 height: 14px;116 border-radius: 8px;117 z-index: 10;118 }119 .k{120 width: 10px;121 height: 12px;122 }123 .k1{124 width: 14px;125 height: 6px;126 }127 .s{128 height: 150px;129 display: table;130 border-collapse:separate;131 border-spacing: 1px;132 }133 .ss{134 width: 1px;135 height: 100%;136 position: relative !important;137 display: table-cell;138 }139 .i1 {140 position: relative;141 width: 162px;142 height: 46px;143 }144 145 .i1:before,146 .i1:after {147 box-shadow: 0px 0px 1px 0 #666;148 content: "";149 position: absolute;150 top: 0;151 left: 0;152 width: 30px;153 height: 40px; 154 border: 3px solid red;155 border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;156 -webkit-transform: rotate(-90deg);157 -moz-transform: rotate(-90deg);158 -ms-transform: rotate(-90deg);159 -o-transform: rotate(-90deg);160 transform: rotate(-90deg);161 }162 163 .i1:after,.i2:after {164 left: auto;165 right: 0;166 border-radius:50% 50% 50% 50% / 70% 70% 30% 30%;167 -webkit-transform: rotate(-90deg);168 -moz-transform: rotate(-90deg);169 -ms-transform: rotate(-90deg);170 -o-transform: rotate(-90deg);171 transform: rotate(-90deg);172 } 173 .i2 {174 position: relative;175 width: 136px;176 height: 24px;177 }178 .i2:before,179 .i2:after {180 box-shadow: 0px 0px 1px 0 #666;181 content: "";182 position: absolute;183 top: 0;184 left: 0;185 width: 12px;186 height: 20px; 187 border: 2px solid red;188 border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;189 -webkit-transform: rotate(-90deg);190 -moz-transform: rotate(-90deg);191 -ms-transform: rotate(-90deg);192 -o-transform: rotate(-90deg);193 transform: rotate(-90deg);194 }195 196 .i2:after {197 left: auto;198 right: 0;199 border-radius:50% 50% 50% 50% / 70% 70% 30% 30%;200 -webkit-transform: rotate(-90deg);201 -moz-transform: rotate(-90deg);202 -ms-transform: rotate(-90deg);203 -o-transform: rotate(-90deg);204 transform: rotate(-90deg);205 } 206 .e1 {207 position: relative;208 width: 12px;209 height: 24px;210 }211 .e1:before,212 .e1:after {213 box-shadow: 0px 0px 1px 0 #666;214 content: "";215 position: absolute;216 top: 0;217 left: 0;218 width: 12px;219 height: 20px; 220 border: 2px solid red;221 border-radius:50% 50% 50% 50% / 30% 30% 70% 70%;222 -webkit-transform: rotate(-90deg);223 -moz-transform: rotate(-90deg);224 -ms-transform: rotate(-90deg);225 -o-transform: rotate(-90deg);226 transform: rotate(-90deg);227 }228 .m{229 width:80px;230 height: 80px;231 -webkit-transform: rotate(45deg);232 -moz-transform: rotate(45deg);233 -ms-transform: rotate(45deg);234 -o-transform: rotate(45deg);235 transform: rotate(45deg);236 237 }238 .n{239 width:80px;240 height: 80px;241 -webkit-transform: rotate(-45deg);242 -moz-transform: rotate(-45deg);243 -ms-transform: rotate(-45deg);244 -o-transform: rotate(-45deg);245 transform: rotate(-45deg);246 247 }248 .m .rx,.n .rx{249 position: relative;250 display: table;251 border-collapse:separate;252 border-spacing: 1px;253 }254
新闻热点
疑难解答
