<div class="whatsapp">
<div class="bubble">
<div class="phone">
<div class="top">
</div>
<div class="bottom">
</div>
</div>
</div>
</div>
:root {
--logo-color: #4FD840;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: #F5F5F5;
}
.whatsapp {
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 1px 1px 3px #bfbfbf;
}
.bubble {
width: 200px;
height: 200px;
border: 15px solid #fff;
border-radius: 50%;
position: relative;
}
.bubble:before {
content: '';
position: absolute;
left: -32px;
bottom: -45px;
border: 30px solid;
border-right-width: 60px;
border-color: transparent #fff transparent transparent;
transform: rotate(-52deg);
z-index: 1;
}
.bubble:after {
content: '';
position: absolute;
left: -3px;
bottom: -20px;
border: 20px solid;
border-right-width: 35px;
border-color: transparent var(--logo-color) transparent transparent;
transform: rotate(-52deg);
z-index: 2;
}
.whatsapp, .bubble {
background-color: var(--logo-color);
}
.phone {
width: 150px;
height: 35px;
background-color: #fff;
border-bottom-left-radius: 100% 70px;
border-bottom-right-radius: 100% 70px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
transform: rotate(45deg);
position: absolute;
top: 47%;
left: 6%;
}
.phone:after {
content: '';
width: 82px;
height: 82px;
background: #f00;
position: absolute;
border-bottom-left-radius: 100%40px;
border-bottom-right-radius: 100%40px;
top: -72px;
left: 35px;
z-index: 2;
background-color: var(--logo-color);
}
.top, .bottom {
position: absolute;
background-color: #fff;
width: 40px;
height: 20px;
top: -19px;
z-index: 3;
}
.top {
left: 1px;
transform: skew(-5deg);
border-top-right-radius: 100% 20px;
border-top-left-radius: 100% 15px;
}
.bottom {
right: 1px;
transform: skew(5deg);
border-top-left-radius: 100% 20px;
border-top-right-radius: 100% 15px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.