css实现标签样式Tags

源码

<ul class="tags">
	<li class="tag"><span>standard</span><span class="num">4</span></li>
	<li class="tag tag-aqua"><span>aqua</span><span class="num">12</span></li>
	<li class="tag tag-blue"><span>blue</span><span class="num">1</span></li>
	<li class="tag tag-orange"><span>orange</span><span class="num">1</span></li>
	<li class="tag tag-red"><span>red</span><span class="num">2</span></li>
	<li class="tag tag-yellow"><span>yellow</span><span class="num">8</span></li>
	<li class="tag tag-round"><span>standard round</span><span class="num">6</span></li>
</ul>

<style>
	* {
	    box-sizing: border-box;
		list-style-type: none;
	}
	html {
	    font-size: 62.5%;
	    height: 100%;
	}
	body {
	    font: normal 16px 'Open Sans', sans-serif;
	    padding: 4rem;
		background:#b1600c
	}
	.tags {
	    list-style: none;
	    padding: 0;
	    margin: 0;
	}
	.tag {
	    color: #737373;
	    background: #cccccc;
	    box-shadow: 0 4px 0 0 #b3b3b3, 4px 4px 0 0 #b3b3b3;
	    display: inline-block;
	    font: normal normal normal 14px/12px 'Open Sans', sans-serif;
	    height: 30px;
	    margin: 0 2rem 1rem 0;
	    padding: 1rem 2.8rem 1rem 2rem;
	    position: relative;
	    top: 0;
	    content: "";
	    cursor: pointer;
	    text-align: center;
	    text-transform: lowercase;
	    border: 0 solid transparent;
	    transition: all 0.3s ease;
	}
	.tag:before {
	    color: rgba(255, 255, 255, 0.9);
	    background: #cccccc;
	    box-shadow: 0 4px 0 0 #b3b3b3;
	    display: inline-block;
	    width: 22px;
	    height: 22px;
	    position: absolute;
	    top: 4px;
	    right: -12px;
	    z-index: 1;
	    content: "";
	    cursor: pointer;
	    transform: rotateY(1deg) rotateZ(-45deg) scaleX(1) scaleY(1) scaleZ(1);
	    transition: all 0.3s ease;
	}
	.tag:hover:before {
	    background: #d9d9d9;
	}
	.tag:active:before {
	    box-shadow: none;
	}
	.tag:after {
	    display: inline-block;
	    background: #FFF;
	    border-radius: 10px;
	    box-shadow: 3px 3px 0 0 #b3b3b3 inset;
	    width: 8px;
	    height: 8px;
	    position: absolute;
	    top: 12px;
	    right: 0;
	    z-index: 2;
	    content: "";
	    cursor: pointer;
	    transition: all 0.3s ease;
	}
	.tag:active:after {
	    box-shadow: none;
	}
	.tag:hover {
	    background: #d9d9d9;
	    transform: scale(1.03, 1.03);
	}
	.tag:active {
	    box-shadow: none;
	    top: 4px;
	}
	.tag span {
	    position: relative;
	    z-index: 2;
	}
	.tag span.num {
	    display: block;
	    color: #bfbfbf;
	    position: absolute;
	    top: 0;
	    left: 0;
	    margin: 0;
	    font: bold 50px/28px 'Open Sans', sans-serif;
	    letter-spacing: -6px;
	    overflow: hidden;
	    height: 30px;
	    width: 100%;
	    text-align: left;
	    z-index: 1;
	}
	.tag-round {
	    border-radius: 4px 1px 1px 4px;
	}
	.tag-round:before {
	    border-radius: 1px 1px 4px;
	}
	.tag-aqua {
	    color: #072520;
	    background: #28d0b3;
	    box-shadow: 0 4px 0 0 #20a58e, 4px 4px 0 0 #20a58e;
	}
	.tag-aqua:before {
	    background: #28d0b3;
	    box-shadow: 0 4px 0 0 #20a58e;
	}
	.tag-aqua:hover:before {
	    background: #39d9bd;
	}
	.tag-aqua:after {
	    box-shadow: 3px 3px 0 0 #20a58e inset;
	}
	.tag-aqua:hover {
	    background: #39d9bd;
	}
	.tag-aqua span.num {
	    color: #24bba1;
	}
	.tag-blue {
	    color: black;
	    background: #5945e8;
	    box-shadow: 0 4px 0 0 #331cde, 4px 4px 0 0 #331cde;
	}
	.tag-blue:before {
	    background: #5945e8;
	    box-shadow: 0 4px 0 0 #331cde;
	}
	.tag-blue:hover:before {
	    background: #6d5ceb;
	}
	.tag-blue:after {
	    box-shadow: 3px 3px 0 0 #331cde inset;
	}
	.tag-blue:hover {
	    background: #6d5ceb;
	}
	.tag-blue span.num {
	    color: #452ee5;
	}
	.tag-orange {
	    color: #221202;
	    background: #e17a0f;
	    box-shadow: 0 4px 0 0 #b1600c, 4px 4px 0 0 #b1600c;
	}
	.tag-orange:before {
	    background: #e17a0f;
	    box-shadow: 0 4px 0 0 #b1600c;
	}
	.tag-orange:hover:before {
	    background: #f0871a;
	}
	.tag-orange:after {
	    box-shadow: 3px 3px 0 0 #b1600c inset;
	}
	.tag-orange:hover {
	    background: #f0871a;
	}
	.tag-orange span.num {
	    color: #c96d0d;
	}
	.tag-red {
	    color: #290a0a;
	    background: #cc3333;
	    box-shadow: 0 4px 0 0 #a32929, 4px 4px 0 0 #a32929;
	}
	.tag-red:before {
	    background: #cc3333;
	    box-shadow: 0 4px 0 0 #a32929;
	}
	.tag-red:hover:before {
	    background: #d14747;
	}
	.tag-red:after {
	    box-shadow: 3px 3px 0 0 #a32929 inset;
	}
	.tag-red:hover {
	    background: #d14747;
	}
	.tag-red span.num {
	    color: #b82e2e;
	}
	.tag-yellow {
	    color: #312b03;
	    background: #eed112;
	    box-shadow: 0 4px 0 0 #bfa80e, 4px 4px 0 0 #bfa80e;
	}
	.tag-yellow:before {
	    background: #eed112;
	    box-shadow: 0 4px 0 0 #bfa80e;
	}
	.tag-yellow:hover:before {
	    background: #f0d62a;
	}
	.tag-yellow:after {
	    box-shadow: 3px 3px 0 0 #bfa80e inset;
	}
	.tag-yellow:hover {
	    background: #f0d62a;
	}
	.tag-yellow span.num {
	    color: #d7bd0f;
	}
</style>

链接: https://www.fly63.com/course/33_1619