WhatsApp Logo Using HTML and CSS

HTML

CSS

body {
			width: 100vw;
			height: 100vh;
			overflow: hidden;
			background: lightblue;
		}

.main-heading {
			color: rgb(6, 2, 114);
			text-align: center;
			padding: 3rem;
		}
.whatsapp-common-div{
	width: 70px;
	height: 70px;
	border-radius: 35px;
	background: #3AC371;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.white-area-div{
	width: 80px;
	height: 80px;
	border-radius: 40px;
	background-color: #fff;
	box-shadow: 2px 2px 3px 2px rgba(0,0,0,.3);
}
.white-area-div::before{
	content: "";
	top: 65px;
	left: -15px;
	border-width: 20px;
	border-style: solid;
	border-color: transparent #fff transparent transparent;
	position: absolute;
	transform: rotate(-50deg) rotateX(-55deg);
}
.white-area-div::after{
	content: "";
	top: 63px;
	left: -4px;
	border-width: 15px;
	border-style: solid;
	border-color: transparent #3AC371 transparent transparent;
	position: absolute;
	transform: rotate(-51deg) rotateX(-50deg);
}
.fas{
	left: 17px;
	top: 18px;
	position: absolute;
	font-size: 35px;
	color: #fff;
	transform: rotate(90deg);
}

Ui Code Snippets

WhatsApp Logo Using HTML and CSS

HTML

CSS

JS

Output

Network Marketing

SEO Course

Our Courses

Our Tutorials

Ui Code Snippets

Popular Notes

Ui Code Snippets

WhatsApp Logo Using HTML and CSS

HTML

CSS

JS

Output

Network Marketing

SEO Course