Facebook

https://danielpietrasik.pl/historia-css/

by Daniel Pietrasik

HTML

<!-- 
 - CSS4 zaawansowane kształty rysowane z kodu
 - https://danielpietrasik.pl/css4-zaawansowane-ksztalty-rysowane-z-kodu/
-->

<div id="facebook"></div>

CSS

/**
 * CSS4 zaawansowane kształty rysowane z kodu
 * https://danielpietrasik.pl/css4-zaawansowane-ksztalty-rysowane-z-kodu/
 **/

#facebook {
	position: relative;
	width: 100px;
	height: 100px;
	overflow: hidden;
	background: #4c66a4;
	border-radius: 10px;
	border-top: 20px solid #4c66a4;
	border-right: 20px solid #4c66a4;
	margin: 40px auto 0; 
}

#facebook::before {
	position: absolute;
	content: "";
	width: 40px;
	height: 90px;
	bottom: -30px;
	right: -37px;
	background: #4c66a4;
	border: 20px solid #fff;
	border-radius: 25px;
}

#facebook::after {
	position: absolute;
	content: "";
	width: 65px;
	top: 40px;
	height: 20px;
	right: 0px;
	background: #fff;
}