CSS3: LineArt - the page icon

css3-lineart-the-page-icon.markdown

CSS3: LineArt - the page icon

One block element styled as icon. No additional markup, just CSS.

A Pen by SynCap on CodePen.

License.

index.jade

.page

style.less

.page {
	position: relative;
	z-index: 1;

	width: 210px;
	height: 297px;
	margin: 30px auto;

	border: 2px solid #05c;
	
	&:before {
		position: absolute;
		z-index: 2;
		right: 0;

		display: block;

		width: 32px;
		height: 32px;

		content: '';

		border-bottom: 2px solid #05c;
		border-left: 2px solid #05c;
		background: #ccc;
	}

	&:after {
		position: absolute;
		z-index: 3;
		top: -27px;
		right: -26px;

		display: block;

		width: 50px;
		height: 50px;

		content: '';
		transform: rotate(45deg);

		border-bottom: 2px solid #05c;
		background: #fff;
	}
}