cssbattle12

<div class="s l"></div>
<div class="s r"></div>
<div class="m"></div>
<div class="t t1"></div>
<div class="t t2"></div>
<style>
* {background:#F5D6B4;}
.s {
width: 60px;
height: 60px;
border-radius: 50%;
border: 20px solid #D86F45;
position: absolute;
}
.l {
left: 70px;
top: 100px;
border-bottom-color: transparent;
border-left-color: transparent;
transform: rotate(135deg);
}
.r {
left: 230px;
top: 100px;
border-bottom-color: transparent;
border-left-color: transparent;
transform: rotate(135deg);
}
.m {
width: 60px;
height: 30px;
border-radius: 100px 100px 0 0;
border-top: 20px solid #D86F45;
border-left: 20px solid #D86F45;
border-right: 20px solid #D86F45;
position: absolute;
left: 150px;
top: 100px;
}
.t {
width: 20px;
height: 20px;
background: #D86F45;
border-radius: 50%;
position: absolute;
}
.t1 {left:70px;top:140px;}
.t2 {left:310px;top:140px;}
</style>