css3绘制百度的小度熊

height: 30px;
background-color: #e1b79b;
position: absolute;
left: 50%;
transform: translate(-50%,0);
}

/*肚子辅助线*/
.body .arc {
border-bottom: 2px solid #511313;
position: absolute;
top: 70px;
left: 50%;
transform: translate(-50%, 0);
width: 100px;
height: 100px;
border: solid 2px #a57662;
border-color: transparent transparent #a57662 transparent;
border-radius: 50%/ 0 0 30% 30%;
}

/*左脚辅助线*/
.body .arcLeft {
border-bottom: 2px solid #511313;
position: absolute;
bottom: -30px;
left: 43px;
width: 35px;
height: 50px;
border: solid 2px #a57662;
border-color: #a57662 transparent transparent transparent;
border-radius: 50%/ 20% 20% 0 0;
}

/*右脚辅助线*/
.body .arcRight {
border-bottom: 2px solid #511313;
position: absolute;
bottom: -30px;
right: 43px;
width: 35px;
height: 50px;
border: solid 2px #a57662;
border-color: #a57662 transparent transparent transparent;
border-radius: 50%/ 20% 20% 0 0;
}

 阴影

最后一步，给小度熊的脚底加一个阴影，我们就大功告成了。

/*阴影*/
.shaodw {
width: 217px;
height: 39px;
background-color: #e9ecee;
margin: -20px auto;
border-radius: 50%/50%;
}

总结

绘制小度熊的关键是一个是对于布局的分析，一个是css的border-radius和transform: rotate属性的使用。