キーボード – css keyborad –

cssのみで キーボード アイコンを作成してみました。かなり微妙です･･･。キーボードのような、そうでないような･･･

ソース

html

<div class="keyborad"></div>

css

/* 枠 */
.keyborad {
	font-size: 100px;
	position: relative;
	width: 1.4em;
	height: 0.7em;
	border: 0.1em solid #39a9d6;
	border-radius: 0.1em;
}
/* ボタン */
.keyborad::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 1.4em;
	height: 0.7em;
	background:
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.1em 0.1em,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.3em 0.1em,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.5em 0.1em,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.7em 0.1em,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.9em 0.1em,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.1em 0.1em,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.2em 0.2em,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.1em 0.3em,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.4em 0.3em,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.6em 0.3em,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.8em 0.3em,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1em 0.3em,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.2em 0.3em,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.1em 0.5em,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 0.3em 0.5em,
		linear-gradient(to bottom, #39a9d6 0%, #39a9d6 100%) 1.2em 0.5em
	;
	background-size:
		0.1em 0.1em,
		0.1em 0.1em,
		0.1em 0.1em,
		0.1em 0.1em,
		0.1em 0.1em,
		0.2em 0.1em,
		0.1em 0.1em,
		0.2em 0.1em,
		0.1em 0.1em,
		0.1em 0.1em,
		0.1em 0.1em,
		0.1em 0.1em,
		0.1em 0.1em,
		0.1em 0.1em,
		0.8em 0.1em,
		0.1em 0.1em
	;
	background-repeat: no-repeat;
}