Create Pen Shape in CSS

thumbnail

In this tutorial, you will learn to create pen shape in CSS. The CSS is show below.

.pen {
	display: inline-block;
	width: 12px;
	height: 28px;
	background: #000;
	position: relative;
	margin: 10px 0 8px 0px;
	transform: rotateZ(45deg);
}
.pen::after {
	display: inline-block;
	content: '';
	width: 0px;
	height: 0px;
	position: absolute;
	top: 27px;
	border: 6px solid transparent;
	border-top: 12px solid #000;
}
.pen::before {
	display: inline-block;
	content: '';
	width: 11px;
	height: 11px;
	position: absolute;
	bottom: 32px;
	background: #000;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.pen {
	display: inline-block;
	width: 12px;
	height: 28px;
	background: #000;
	position: relative;
	margin: 10px 0 8px 0px;
	transform: rotateZ(45deg);
}
.pen::after {
	display: inline-block;
	content: '';
	width: 0px;
	height: 0px;
	position: absolute;
	top: 27px;
	border: 6px solid transparent;
	border-top: 12px solid #000;
}
.pen::before {
	display: inline-block;
	content: '';
	width: 11px;
	height: 11px;
	position: absolute;
	bottom: 32px;
	background: #000;
}
</style>
</head>
<body>
 
<h2>CSS Pen - Stunning CSS </h2>
<div class="pen" style="margin-left: 10px;"></div>
 
</body>
</html>

The output will be:

Back To Top