标签：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="easyui.css"/>
<script src="jquery-1.8.3.js"></script>
<!--<script src="jquery.easyui.min.js"></script>-->
<script src="test.js"></script>
<style>
*{
margin: 0;
padding:0;
}
.main_obj{
width: 500px;
height: 240px;
/*background-color: #9cf;*/
margin:0 auto;
margin-top: 200px;
}
.ben_main,.lai_main{
height: 230px;
width: 220px;
overflow: hidden;
float: left;
/*background-color: #cccccc;*/
}
.ben{
background-color: #464646;
position: relative;
}
.ben_1{
height: 25px;
width:190px;
top: 45px;
left: 14px;
}
.ben_2{
width: 25px;
height:234px;
left: 95px;
}
.ben_3{
width: 143px;
height: 220px;
border: 20px solid #464646;
position:relative ;
border-radius:100px;
top: -177px;
left:17px;
}
.ben_4{
width: 80px;
height: 25px;
top: -330px;
left:68px;
}
.lai_main{
float: right;
/*background-color:#ccc ;*/
}
.lai_1{
top: -140px;
}
.lai_2{
width: 150px;
height: 150px;
border: 20px solid #98b821;
border-radius:100px ;
position: relative;
top: -151px;
left: -13px;
}
.lai_3{
height: 40px;
width: 180px;
overflow: hidden;
/*background-color: red;*/
position: relative;
top: -441px;
left: 25px;
}
.lai_4{
width: 20px;
height: 40px;
background-color:#98b821 ;
position: relative;
top: -482px;
left: 38px;
transform:rotate(35deg);
}
.lai_4:before{
content: "";
display: block;
width: 15px;
height: 20px;
background-color: #ffffff;
position: relative;
left: -15px;
top: 4px;
}
.lai_5{
transform:rotate(145deg);
position: relative;
left: 155px;
top: -522px;
}
.lai_5:before{
content: "";
position: relative;
left: -15px;
top: 15px;
}
.lai2_out{
height: 61px;
width: 188px;
/* background-color: #0092DC; */
position: relative;
top: -446px;
left: 15px;
overflow: hidden;
transform: rotate(2deg);
}
.lai2_1{
width: 150px;
height: 150px;
border: 20px solid #98b821;
border-radius: 100px;
position: relative;
top:-142px;
}
.lai2_2{
width: 20px;
height: 33px;
background-color: #98b821;
position: relative;
top: -183px;
transform: rotate(45deg);
left: 27px
}
.lai2_2:before{
content: "";
display: block;
width: 23px;
height: 34px;
background-color: #ffffff;
position: relative;
top: 0px;
left: -23px;
}
.lai2_3{
transform:rotate(135deg);
top: -222px;
left: 150px;
}
.lai2_3:before{
position: relative;
top: 13px;
left: -23px;
}
</style>
</head>
<body>
<!--<section>-->
<section>
<div>
<div class="ben_1 ben"></div>
<div class="ben_2 ben"></div>
<div></div>
<div class="ben_4 ben"></div>
</div>
<div>
<div class="ben_1 ben"></div>
<div class="ben_2 ben"></div>
<div class="ben_3 lai_1"></div>
<!--方式一->
<!--<div>-->
<!--<div></div>-->
<!--</div>-->
<!--<div></div>-->
<!--<div class="lai_4 lai_5"></div>-->
<!--方式二->
<div class="lai2_out">
<div class="lai2_1"></div>
<div class="lai2_2"></div>
<div class="lai2_2 lai2_3"></div>
</div>
</div>
</section>
</body>
</html>
标签：
原文地址：http://my.oschina.net/u/1403186/blog/509733
