Hexagon Badge with HTML and CSS

Chia sẻ

---

1. HTML

<div class="main-wrapper">
		<div class="badge yellow">
			<div class="circle"> <i class="fa fa-bolt"></i></div>
			<div class="ribbon">Initiator</div>
		</div>
		<div class="badge orange">
			<div class="circle"> <i class="fa fa-wheelchair-alt"></i></div>
			<div class="ribbon">Disabler</div>
		</div>
		<div class="badge pink">
			<div class="circle"> <i class="fa fa-pied-piper"></i></div>
			<div class="ribbon">Nuker</div>
		</div>
		<div class="badge red">
			<div class="circle"> <i class="fa fa-shield"></i></div>
			<div class="ribbon">Ganker</div>
		</div>
		<div class="badge purple">
			<div class="circle"> <i class="fa fa-anchor"></i></div>
			<div class="ribbon">Durable</div>
		</div>
		<div class="badge teal">
			<div class="circle"> <i class="fa fa-bicycle"></i></div>
			<div class="ribbon">Roamer</div>
		</div>
		<div class="badge blue">
			<div class="circle"> <i class="fa fa-users"></i></div>
			<div class="ribbon">Pusher</div>
		</div>
		<div class="badge blue-dark">
			<div class="circle"> <i class="fa fa-rocket"></i></div>
			<div class="ribbon">Escape</div>
		</div>
		<div class="badge green">
			<div class="circle"> <i class="fa fa-tree"></i></div>
			<div class="ribbon">Jungler</div>
		</div>
		<div class="badge green-dark">
			<div class="circle"> <i class="fa fa-user fa-street-view"></i></div>
			<div class="ribbon">Offlaner</div>
		</div>
		<div class="badge silver">
			<div class="circle"> <span class="font">AFK</span></div>
			<div class="ribbon">Carry</div>
		</div>
		<div class="badge gold">
			<div class="circle"> <i class="fa fa-magic"></i></div>
			<div class="ribbon">Support</div>
		</div>
	</div>
	<footer>
		<a href="#" target="_blank"><i class="fa fa-youtube icons"></i></a>
		<a href="#" target="_blank"><i class="fa fa-facebook icons"></i></a>
	</footer>

2. CSS

@import url('https://fonts.googleapis.com/css?family=Comfortaa:700');
		@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

		body {
			font-family: 'Comfortaa', sans-serif;
			background: #111;
		}

		.main-wrapper {
			width: 90%;
			max-width: 900px;
			margin: 3em auto;
			text-align: center;
		}

		.badge {
			position: relative;
			margin: 1.5em 3em;
			width: 4em;
			height: 6.2em;
			border-radius: 10px;
			display: inline-block;
			top: 0;
			transition: all 0.2s ease;
		}
		.badge:before, .badge:after {
			position: absolute;
			width: inherit;
			height: inherit;
			border-radius: inherit;
			background: inherit;
			content: "";
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
		.badge:before {
			transform: rotate(60deg);
		}
		.badge:after {
			transform: rotate(-60deg);
		}
		.badge:hover {
			top: -4px;
		}
		.badge .circle {
			width: 60px;
			height: 60px;
			position: absolute;
			background: #fff;
			z-index: 10;
			border-radius: 50%;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
		.badge .circle i.fa {
			font-size: 2em;
			margin-top: 8px;
		}
		.badge .font {
			display: inline-block;
			margin-top: 1em;
		}
		.badge .ribbon {
			position: absolute;
			border-radius: 4px;
			padding: 5px 5px 4px;
			width: 100px;
			z-index: 11;
			color: #fff;
			bottom: 12px;
			left: 50%;
			margin-left: -55px;
			height: 15px;
			font-size: 14px;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.27);
			text-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
			text-transform: uppercase;
			background: linear-gradient(to bottom right, #555 0%, #333 100%);
			cursor: default;
		}

		.yellow {
			background: linear-gradient(to bottom right, #ffeb3b 0%, #fbc02d 100%);
			color: #ffb300;
		}

		.orange {
			background: linear-gradient(to bottom right, #ffc107 0%, #f57c00 100%);
			color: #f68401;
		}

		.pink {
			background: linear-gradient(to bottom right, #F48FB1 0%, #d81b60 100%);
			color: #dc306f;
		}

		.red {
			background: linear-gradient(to bottom right, #f4511e 0%, #b71c1c 100%);
			color: #c62828;
		}

		.purple {
			background: linear-gradient(to bottom right, #ab47bc 0%, #4527a0 100%);
			color: #7127a8;
		}

		.teal {
			background: linear-gradient(to bottom right, #4DB6AC 0%, #00796B 100%);
			color: #34a297;
		}

		.blue {
			background: linear-gradient(to bottom right, #4FC3F7 0%, #2196F3 100%);
			color: #259af3;
		}

		.blue-dark {
			background: linear-gradient(to bottom right, #1976D2 0%, #283593 100%);
			color: #1c68c5;
		}

		.green {
			background: linear-gradient(to bottom right, #cddc39 0%, #8bc34a 100%);
			color: #7cb342;
		}

		.green-dark {
			background: linear-gradient(to bottom right, #4CAF50 0%, #1B5E20 100%);
			color: #00944a;
		}

		.silver {
			background: linear-gradient(to bottom right, #E0E0E0 0%, #BDBDBD 100%);
			color: #9e9e9e;
		}

		.gold {
			background: linear-gradient(to bottom right, #e6ce6a 0%, #b7892b 100%);
			color: #b7892b;
		}

		footer {
			text-align: center;
			margin: 1em auto;
		}
		footer a {
			text-decoration: none;
			display: inline-block;
			width: 45px;
			height: 45px;
			border-radius: 50%;
			background: #111;
			border: .5px dashed #f8f8f8;
			color: #999;
			margin: 5px;
		}
		footer a:hover {
			background: #222;
		}
		footer a .icons {
			margin-top: 12px;
			display: inline-block;
			font-size: 20px;
		}

3. JAVASCRIPT

---