Welcome aboard! We are happy you are here and wish you good net-raft!
<!DOCTYPE html>
<html>
<head>
<style>
.cyllinder{
position:relative;
margin:50px;
}
.cyllinder .middle_side{
width:100px;
height:180px;
background-color:orange;
position:absolute;
}
.cyllinder .top_side{
width: 96px;
height: 50px;
background-color:orange;
-moz-border-radius: 50px / 25px;
-webkit-border-radius: 50px / 25px;
border-radius: 50px / 25px;
position:absolute;
top:-25px;
border: solid rgba(160, 160, 160, 0.2);
}
.cyllinder .bottom_side{
width: 100px;
height: 50px;
background-color:orange;
-moz-border-radius: 60px / 25px;
-webkit-border-radius: 60px / 25px;
border-radius: 60px / 25px;
position:absolute;
top:155px;
box-shadow:0px 0px 10px rgba(0,0,0,0.3);
}
</style>
</head>
<body>
<div class="cyllinder">
<div class="bottom_side"></div>
<div class="middle_side"></div>
<div class="top_side"></div>
</div>
</body>
</html>
The most helpful CSS solutions