html css如何画图,HTML/CSS CSS3 画图

.clearfix:after {content:"."; display:block;

height:0;

visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

div{

float:left;

margin-bottom:10px;

margin-left:10px;

}

.div1{

position: relative;

width: 0;

height: 0;

border-top: 9px solid transparent;

border-right: 9px solid red;

-webkit-transform: rotate(10deg);

-moz-transform: rotate(10deg);

-ms-transform: rotate(10deg);

-o-transform: rotate(10deg);

}

.div1:after{

content: "";

position: absolute;

border: 0 solid transparent;

border-top: 3px solid red;

border-radius: 20px 0 0 0;

top: -12px; left: -9px;

width: 12px;

height: 12px;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-ms-transform: rotate(45deg);

-o-transform: rotate(45deg);

}

.div2{

width: 100px;

height: 100px;

background: red;

}

.div3{

width: 100px;

height: 100px;

margin:0 20px 0 20px;

-webkit-transform: skew(20deg);

-moz-transform: skew(20deg);

-o-transform: skew(20deg);

-ms-transform: skew(20deg);

transform: skew(20deg);

background: red;

}

.div4{

width: 50px;

height: 50px;

margin: 20px 0;

-webkit-transform-origin: 100% 100%;

-moz-transform-origin: 100% 100%;

-o-transform-origin: 100% 100%;

-ms-transform-origin: 100% 100%;

transform-origin: 100% 100%;

-webkit-transform:rotate(45deg);

-moz-transform:rotate(45deg);

-o-transform:rotate(45deg);

-ms-transform:rotate(45deg);

transform:rotate(45deg);

background: red;

}

.div5{

width: 100px;

height: 0;

border-bottom: 100px solid red;

border-left: 60px solid transparent;

border-right: 30px solid transparent;

}

.div6{

width: 0;

height: 100px;

border-right: 100px solid red;

border-top: 60px solid transparent;

border-bottom: 30px solid transparent;

}

.div7{

width: 100px;

height: 0;

border-top: 100px solid red;

border-left: 60px solid transparent;

border-right: 30px solid transparent;

}

.div8{

width: 0;

height: 100px;

border-left: 100px solid red;

border-top: 60px solid transparent;

border-bottom: 30px solid transparent;

}

.div9{

width:100px;

height: 50px;

background: red;

-moz-border-radius: 50px 50px 0 0;

-webkit-broder-radius: 50px 50px 0 0;

border-radius: 50px 50px 0 0;

}

.div10{

width:100px;

height: 50px;

background: red;

-moz-border-radius: 0 0 50px 50px;

-webkit-broder-radius: 0 0 50px 50px;

border-radius: 0 0 50px 50px;

}

.div11{

width:50px;

height: 100px;

background: red;

-moz-border-radius: 0 50px 50px 0;

-webkit-broder-radius: 0 50px 50px 0;

border-radius: 0 50px 50px 0;

}

.div12{

width:50px;

height: 100px;

background: red;

-moz-border-radius: 50px 0 0 50px;

-webkit-broder-radius: 0 0 50px 50px;

border-radius: 50px 0 0 50px;

}

.div13{

width:50px;

height: 100px;

background: red;

-moz-border-radius: 0 0 50px 50px;

-webkit-broder-radius: 0 0 50px 50px;

border-radius: 0 0 50px 50px;

}

.div14{

width: 50px;

height: 50px;

background: red;

-moz-border-radius: 50px 0 0 0;

-webkit-border-radius: 50px 0 0 0;

border-radius: 50px 0 0 0;

}

.div15{

width: 50px;

height: 50px;

background: red;

-moz-border-radius: 0 50px 0 0;

-webkit-border-radius: 0 50px 0 0;

border-radius: 0 50px 0 0;

}

.div16{

width: 50px;

height: 50px;

background: red;

-moz-border-radius: 0 0 50px 0;

-webkit-border-radius: 0 0 50px 0;

border-radius: 0 0 50px 0;

}

.div17{

width: 50px;

height: 50px;

background: red;

-moz-border-radius: 0 0 0 50px;

-webkit-border-radius: 0 0 0 50px ;

border-radius: 0 0 0 50px;

}

.div18{

height: 0px;

width: 0px;

border: 50px solid red;

border-color: purple red yellow orange;

-moz-border-radius: 50px;

-webkit-border-radius:50px;

border-radius: 50px;

}

.div19{

height: 0px;

width: 0px;

border: 50px solid red;

border-color: transparent red yellow orange;

-moz-border-radius: 50px;

-webkit-border-radius:50px;

border-radius: 50px;

}

.div20{

height: 0px;

width: 0px;

border: 50px solid red;

border-color: purple transparent yellow orange;

-moz-border-radius: 50px;

-webkit-border-radius:50px;

border-radius: 50px;

}

.div21{

height: 0px;

width: 0px;

border: 50px solid red;

border-color: purple red transparent orange;

-moz-border-radius: 50px;

-webkit-border-radius:50px;

border-radius: 50px;

}

.div22{

height: 0px;

width: 0px;

border: 50px solid red;

border-color: purple red yellow transparent;

-moz-border-radius: 50px;

-webkit-border-radius:50px;

border-radius: 50px;

}

.div23{

width: 0;

height:0;

border-color: red;

border-style: dotted;

border-width: 0 0 40px 40px;

margin: 20px;

}

.div24{

width: 0;

height:0;

border-color: red;

border-style: dotted;

border-width: 0 40px 40px 0 ;

}

.div25{

width: 0;

height:0;

border-color: red;

border-style: dotted;

border-width: 40px 0 0 40px ;

margin: 20px;

}

.div26{

width: 0;

height:0;

border-color: red;

border-style: dotted;

border-width: 40px 40px 0 0 ;

}

.div27{

height: 0;

width: 0;

border: 50px solid red;

border-color: transparent transparent transparent red;

}

.div28{

height: 0;

width: 0;

border: 50px solid red;

border-color: transparent transparent red transparent;

}

.div29{

height: 0;

width: 0;

border: 50px solid red;

border-color: transparent red transparent transparent;

}

.div30{

height: 0;

width: 0;

border: 50px solid red;

border-color: red transparent transparent transparent;

}

.div31{

height: 100px;

width: 0;

border: 50px solid red;

border-color: red red transparent red;

}

.div32{

height: 0;

width: 0;

border: 50px solid red;

border-color: red  transparent red red;

}

.div33{

height: 100px;

width: 0;

border: 50px solid red;

border-color: transparent red red red;

}

.div34{

height: 100px;

width: 0;

border: 50px solid red;

border-color: red red red transparent;

}

.div35{

width: 100px;

height: 100px;

border: 0 solid transparent;

border-top: 10px solid red;

border-radius: 50px 0 0 0;

}

.div36{

width: 100px;

height: 100px;

border: 0 solid transparent;

border-top: 10px solid red;

border-radius: 50px 50px 0 0;

}

.div37{

width: 100px;

height: 100px;

border: 0 solid transparent;

border-top: 10px solid red;

border-right: 10px solid red;

border-radius: 50px 50px 0 0;

}

.div38{

width: 100px;

height: 100px;

border: 0 solid transparent;

border-top: 10px solid red;

border-right: 10px solid red;

border-radius: 50px 60px 50px 0;

}

.div39{

width: 100px;

height: 100px;

border: 0 solid transparent;

border-top: 10px solid red;

border-right: 10px solid red;

border-left: 10px solid red;

border-radius: 50px 50px 0 0;

}

.div40 {

width: 100px;

height: 100px;

border: 0 solid transparent;

border-top: 10px solid red;

border-bottom: 10px solid red;

border-radius: 50px 50px 50px 50px;

}

class="div1">箭头

class="div2">

class="div3">

class="div4">

class="div5">

class="div6">

class="div7">

class="div8">

class="div9">

class="div10">

class="div11">

class="div12">

class="div14">

class="div15">

class="div16">

class="div17">

class="div18">

class="div19">

class="div20">

class="div21">

class="div22">

class="div23">

class="div24">

class="div25">

class="div26">

class="div27">

class="div28">

class="div29">

class="div30">

class="div31">

class="div32">

class="div33">

class="div34">

class="div35">

class="div36">

class="div37">

class="div38">

class="div39">

class="div40">