CSSでシンプルなチェックマークをいくつか作ってみた

飛び出るチェック、丸枠、角丸枠のシンプルなチェックマークCSS

赤字、赤枠でシンプルなチェックマークCSSを作ったのですが、枠の形やチェックの大きさを少し変えたバージョンも作りました。
[sbh_recmd id=1108 length=114]
今回のサンプルは、黒枠、赤字チェックです。
[adsense]

シンプルなチェックマークの表示例

シンプルなチェックマーク
チェックが飛び出るチェックマーク
チェックボックスが四角ではなくて丸のチェックマーク
丸枠で飛び出るチェックマーク
チェックボックスが角丸のチェックマーク
角丸枠で飛び出るチェックマーク
チェックボックスがひし形のチェックマーク
ひし形枠で飛び出るチェックマーク

シンプルなチェックマーク

htmlソース

<span class="checkmark000">シンプルなチェックマーク</span>

cssコード

.checkmark000{
	padding-left:24px;
	position:relative;
}
.checkmark000:before,
.checkmark000:after{
	content:"";
	display:block;
	position:absolute;
}
.checkmark000:before{
	width:16px;
	height:16px;
	background:#ffffff;
    	border:1px solid #000000;
	left:0;top:2px;
}
.checkmark000:after{
	border-left:2px solid #ff0000;
	border-bottom:2px solid #ff0000;
	width:6px;
	height:3px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:5px;
	top:7px;
}

チェックが飛び出るチェックマーク

htmlソース

<span class="checkmark001">チェックが飛び出るチェックマーク</span>

cssコード

.checkmark001{
	padding-left:24px;
	position:relative;
}
.checkmark001:before,
.checkmark001:after{
	content:"";
	display:block;
	position:absolute;
}
.checkmark001:before{
	width:16px;
	height:16px;
	background:#ffffff;
    	border:1px solid #000000;
	left:0;top:2px;
}
.checkmark001:after{
	border-left:2px solid #ff0000;
	border-bottom:2px solid #ff0000;
	width:18px;
	height:5px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:5px;
	top:3px;
}

チェックボックスが四角ではなくて丸のチェックマーク

htmlソース

<span class="checkmark002">チェックボックスが四角ではなくて丸のチェックマーク</span>

cssコード

.checkmark002{
	padding-left:24px;
	position:relative;
}

.checkmark002:before,
.checkmark002:after{
	content:"";
	display:block;
	position:absolute;
}
.checkmark002:before{
	width:16px;
	height:16px;
	border-radius:8px;
	background:#ffffff;
	border:1px solid #000000;
	left:0;top:2px;
}
.checkmark002:after{
	border-left:2px solid #ff0000;
	border-bottom:2px solid #ff0000;
	width:6px;
	height:3px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:5px;
	top:7px;
}

丸枠で飛び出るチェックマーク

htmlソース

<span class="checkmark003">丸枠で飛び出るチェックマーク</span>

cssコード

.checkmark003{
	padding-left:24px;
	position:relative;
}

.checkmark003:before,
.checkmark003:after{
	content:"";
	display:block;
	position:absolute;
}
.checkmark003:before{
	width:16px;
	height:16px;
	border-radius:8px;
	background:#ffffff;
	border:1px solid #000000;
	left:0;top:2px;
}
.checkmark003:after{
	border-left:2px solid #ff0000;
	border-bottom:2px solid #ff0000;
	width:15px;
	height:5px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:5px;
	top:3px;
}

チェックボックスが角丸のチェックマーク

htmlソース

<span class="checkmark004">チェックボックスが角丸のチェックマーク</span>

cssコード

.checkmark004{
	padding-left:24px;
	position:relative;
}

.checkmark004:before,
.checkmark004:after{
	content:"";
	display:block;
	position:absolute;
}
.checkmark004:before{
	width:16px;
	height:16px;
	border-radius:3px;
	background:#ffffff;
	border:1px solid #000000;
	left:0;top:2px;
}
.checkmark004:after{
	border-left:2px solid #ff0000;
	border-bottom:2px solid #ff0000;
	width:6px;
	height:3px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:5px;
	top:7px;
}

角丸枠で飛び出るチェックマーク

htmlソース

<span class="checkmark005">角丸枠で飛び出るチェックマーク</span>

cssコード

.checkmark005{
	padding-left:24px;
	position:relative;
}

.checkmark005:before,
.checkmark005:after{
	content:"";
	display:block;
	position:absolute;
}
.checkmark005:before{
	width:16px;
	height:16px;
	border-radius:3px;
	background:#ffffff;
	border:1px solid #000000;
	left:0;top:2px;
}
.checkmark005:after{
	border-left:2px solid #ff0000;
	border-bottom:2px solid #ff0000;
	width:15px;
	height:5px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:5px;
	top:3px;
}

チェックボックスがひし形のチェックマーク

htmlソース

<span class="checkmark006">チェックボックスがひし形のチェックマーク</span>

cssコード

.checkmark006{
	padding-left:24px;
	position:relative;
}

.checkmark006:before,
.checkmark006:after{
	content:"";
	display:block;
	position:absolute;
}
.checkmark006:before{
	width:12px;
	height:12px;
	background:#ffffff;
    border:1px solid #000000;
	left:3px;top:2px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);}
.checkmark006:after{
	border-left:2px solid #ff0000;
	border-bottom:2px solid #ff0000;
	width:6px;
	height:3px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:6px;
	top:5px;
}

ひし形枠で飛び出るチェックマーク

htmlソース

<span class="checkmark007">ひし形枠で飛び出るチェックマーク</span>

cssコード

.checkmark007{
	padding-left:24px;
	position:relative;
}

.checkmark007:before,
.checkmark007:after{
	content:"";
	display:block;
	position:absolute;
}
.checkmark007:before{
	width:12px;
	height:12px;
	background:#ffffff;
    border:1px solid #000000;
	left:3px;top:2px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);}
.checkmark007:after{
	border-left:2px solid #ff0000;
	border-bottom:2px solid #ff0000;
	width:15px;
	height:5px;
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	left:5px;
	top:0px;
}