实现方法非常简单，直接看代码吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.github-badge {
	display: inline-block;
	border-radius: 4px;
	text-shadow: none;
	font-size: 12px;
	color: #fff;
	line-height: 15px;
	background-color: #ABBAC3;
  margin-bottom: 5px;
}
.github-badge .badge-subject {
	display: inline-block;
	background-color: #4D4D4D;
	padding: 4px 4px 4px 6px;
	border-top-left-radius: 4px;
	border-bottom-left-radius: 4px;
}
.github-badge .badge-value {
	display: inline-block;
	padding: 4px 6px 4px 4px;
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.github-badge .bg-brightgreen {
	background-color: #4DC820 !important;
}
.github-badge .bg-orange {
	background-color: #FFA500 !important;
}
.github-badge .bg-blueviolet {
	background: linear-gradient(to right, #3ca5f6, #a86af9) !important;
}
.github-badge .bg-lightgrey {
	background-color: #9F9F9F !important;
}

1
2
3
4
<div class="github-badge"><span class="badge-subject">test1</span><span class="badge-value bg-brightgreen">ahzoo</span></div>  
<div class="github-badge"><span class="badge-subject">home-page</span><span class="badge-value bg-blueviolet"> ahzoo.cn </span></div>
<div class="github-badge"><span class="badge-subject"><i class="fa fa-home"></i> home-page</span><span class="badge-value bg-orange "> ahzoo.cn </span></div>
<div class="github-badge"><span class="badge-subject"><i class="fa fa-home"></i></span><span class="badge-value bg-lightgrey">ahzoo</span></div>

预览图：

图片