ubuntu的logo简洁大方，css3操作方便简单，先拿这两个下手：


截图如下：


ubuntu logo


 
  
<!DOCTYPE html>
<html>
<head>
<metacharset=utf-8>
<title>ubuntu logo ---- with css3</title>
<style>
* {
  margin:0;
  padding:0;
}
.wraper_bg {
  width:250px;
  height:250px;
  border-radius:250px;
  background:#f60;
  position:relative;
}
.wraper {
  width:86px;
  height:86px;
  background:#f60;
  border:32px solid white;
  border-radius:100px;
  position:relative;
  top:50px;
  left:50px;
}
.ant {
  width:11px;
  height:40px;
  background:#f60;
  position:absolute;
}
#top_ant {
  top:-27px;
  left:8px;
  -webkit-transform: rotate(-30deg);
}
#bottom_ant {
  top:74px;
  left:8px;
  -webkit-transform: rotate(30deg);
}
#right_ant {
  top:23px;
  left:94px;
  -webkit-transform: rotate(90deg);
}
.circle {
  width:37px;
  height:37px;
  background:white;
  border:7px solid #f60;
  border-radius:33px;
  position:absolute;
}
#left_circle {
  left:-68px;
  top:18px;
}
#top_circle {
  left:61px;
  top:-57px;
}
#bottom_circle {
  left:61px;
  top:92px;
}
</style>
</head>
<body>
<!--橙色大圆圈背景-->
<divclass="wraper_bg">
<divclass="wraper">
<!--三根隔断圆环的橙色条-->
<divclass="ant"id="top_ant"></div>
<divclass="ant"id="bottom_ant"></div>
<divclass="ant"id="right_ant"></div>
<!--三个白色圆圈-->
<divclass="circle"id="left_circle"></div>
<divclass="circle"id="top_circle"></div>
<divclass="circle"id="bottom_circle"></div>
</div>
</div>
</body>
</html>