カレンダー – css calendar –

cssのみで カレンダー アイコンを作成してみました。すこし不恰好になってしまいました。

ソース

html

<div class="calendar"></div>

css

/* 枠 */
.calendar {
	font-size: 100px;
	position: relative;
	width: 1.4em;
	height: 1em;
	border: 0.1em solid #39a9d6;
	border-radius: 0.1em;
	box-shadow: inset 0 0.3em 0 0 #39a9d6;
}
/* リング */
.calendar::before {
	content: "";
	position: absolute;
	top: -0.4em;
	left: 0.2em;
	width: 0.2em;
	height: 0.5em;
	border-radius: 0.1em;
	background-color: #39a9d6;
	box-shadow:
		0 0 0 0.1em #fff,
		0.8em 0 0 0 #39a9d6,
		0.8em 0 0 0.1em #fff
	;
}
/* 日付 */
.calendar::after {
	content: "";
	position: absolute;
	top: 0.4em;
	left: 0.15em;
	width: 0.2em;
	height: 0.2em;
	background-color: #39a9d6;
	box-shadow:
		0.3em 0 0 0 #39a9d6,
		0.6em 0 0 0 #39a9d6,
		0.9em 0 0 0 #39a9d6,
		0 0.3em 0 0 #39a9d6,
		0.3em 0.3em 0 0 #39a9d6,
		0.6em 0.3em 0 0 #39a9d6,
		0.9em 0.3em 0 0 #39a9d6
	;
}

参考サイト

One div

CSS-TRICKS

KSK-soft.com CSS3で描く基本図形