<div class="coffeeCup">
<div class="cup"></div>
<div class="steam"></div>
</div>
body {
display: flex;
align-items: center;
justify-content: center;
height:100vh;
}
.coffeeCup {
position: relative;
width: 50px;
height:0;
border-top: 130px solid #333;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
.coffeeCup:before {
content:"";
position: absolute;
border:3px solid #333;
top:-145px;
width:95px;
height: 10px;
left:-25.5px;
}
.coffeeCup:after {
content:"";
position: absolute;
width:90px;
height: 10px;
border-radius:30px 30px 0 0;
top:-157px;
left:-19px;
background-color: #333;
}
.cup {
position: absolute;
width: 57px;
height:0;
border-top: 55px solid #fff;
border-left: 8.5px solid transparent;
border-right: 8.5px solid transparent;
top:-100px;
left:-12px;
}
.steam {
position: absolute;
width: 20px;
height:20px;
border-top: 3px solid #333;
border-left: 3px solid #333;
border-top-left-radius: 100%;
top:-185px;
left:-10px;
}
.steam:before {
content:"";
position: absolute;
width: 30px;
height:3px;
background-color: #333;
left:20px;
top:-3px;
}
.steam:after {
content:"";
position: absolute;
width: 20px;
height:20px;
border-bottom: 3px solid #333;
border-right: 3px solid #333;
border-bottom-right-radius: 100%;
top:-23px;
left:48px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.