<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>iphone logo</title>
<style type="text/css"> /*==============苹果==============*/
#apple .canvas,.apple6,.apple7,.apple8,.apple61 {
background: #fff;
} #apple .icon {
left: 184px;
height: 202px;
top: 51px;
width: 172px;
} .apple1 {
border-radius: 108px 108px 108px 94px/128px 128px 128px 128px;
height: 128px;
top: 47px;
width: 108px;
} .apple2 {
left: 72px;
} .apple3 {
border-radius: 22px 64px 64px 64px/106px 106px 106px 106px;
height: 106px;
left: 12px;
-webkit-transform: rotate(-25deg);
transform: rotate(-25deg);
top: 98px;
width: 64px;
} .apple4 {
border-radius: 64px 22px 64px 64px/106px 106px 106px 106px;
left: 103px;
-webkit-transform: rotate(25deg);
transform: rotate(25deg);
} .apple5 {
height: 145px;
left: 54px;
top: 53px;
width: 70px;
} .apple6 {
left: 50px;
-webkit-transform: scaley(0.5);
transform: scaley(0.5);
top: 14px;
} .apple61 {
border-radius: 20px;
height: 80px;
-webkit-transform: rotate(-45deg) scale(0.9);
transform: rotate(-45deg) scale(0.9);
width: 80px;
} .apple7 {
border-radius: 50%;
height: 22px;
left: 66px;
top: 192px;
width: 47px;
} .apple8 {
border-radius: 50%;
height: 85px;
left: 144px;
top: 63px;
width: 85px;
} #apple .slice {
height: 200px;
position: absolute;
width: 180px;
} #apple .slice * {
position: absolute;
} #apple .slice1 *{
background:#333;
} /*==========分解apple==========*/ .apple9:before,.apple9:after {
background: #333;
}
.apple9{
left:122px;
top:-18px;
-webkit-transform: rotate(40deg);
transform: rotate(40deg);
}
.apple9:before,.apple9:after {
border-radius:50%;
content:".";
display: block;
height: 90px;
position: absolute;
width:90px;background: #333;
}
.apple9:before {
clip:rect(0 13px 80px 0px);
}
.apple9:after {
clip:rect(14px 100px 76px 76px);
left:-64px;
}
</style>
</head> <body> <div id="apple">
<div class="canvas">
<div class="icon">
<!--苹果[-->
<div class="slice1 slice">
<div class="apple1"></div>
<div class="apple2 apple1"></div>
<div class="apple3"></div>
<div class="apple4 apple3"></div>
<div class="apple5"></div>
</div>
<!--end 苹果--> <div class="slice"> <!--苹果顶部凹下去部分-->
<div class="apple6">
<div class="apple61"></div>
</div>
<!--end 苹果顶部凹下去部分--> <!--苹果底部凹下去部分-->
<div class="apple7"></div>
<!--苹果底部凹下去部分--> <!--被咬一口的部分-->
<div class="apple8"></div>
<!--end 被咬一口部分-->
<!--顶部叶子部分-->
<div class="apple9"></div>
<!--end 顶部叶子部分-->
</div>
</div>
</div>
</div> </body>
</html>
抄袭了原版的，简化了原版的，合适菜鸟学习