Hexa-Box

Hexa-Box.html

<section>
	<ul>
		<li><div class="hexagon"></div></li>
		<li><div class="hexagon"></div></li>
		<li><div class="hexagon"></div></li>
	</ul>
</section>
<section>     
	<ul>
		<li><div class="hexagon"></div></li>
		<li><div class="hexagon"></div></li>
	</ul>       
</section>

style.css

body{
	background:#f7bc28;
}
.hexagon {
    width: 250px;
    height: 138px;
	background: #1e1e1e;
    position: relative;
    overflow: visible;
    box-sizing: border-box;
}
.hexagon:before {
	content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    top: -78px;
    border-left: 125px solid transparent;
    border-right: 125px solid transparent;
    border-bottom: 78px solid #1e1e1e;
}
.hexagon:after {
	content: "";
    position: absolute;
    left: 0;
    width: 0;
    height: 0;
    bottom: -78px;
    border-left: 125px solid transparent;
    border-right: 125px solid transparent;
    border-top: 78px solid #1e1e1e;
}
section{ 
	padding:100px 0 0 0;
	display:block;
	text-align:center;
	margin:0 auto;
}
ul{
	padding:0;
	margin-top: 0px;
    margin-bottom: 0px;
	margin-left: 10px;
    list-style: none;
    display: inline-block;
}
ul li{
	float: left;
	margin:0;
    padding: 0 15px;
}
@media (max-width: 980px){
	.hexagon {
		width: 200px;
		height: 115px;
		padding: 0;
	}
	.hexagon::before {
		top: -68px;
		border-left: 100px solid transparent;
		border-right: 100px solid transparent;
		border-bottom: 68px solid #1e1e1e;
	}
	.hexagon::after {
		bottom: -68px;
		border-left: 100px solid transparent;
		border-right: 100px solid transparent;
		border-top: 68px solid #1e1e1e;
	}
}
@media (max-width: 767px){
	.hexagon {
		width: 300px;
		height: 175px;
		display: inline-block;
	}
	.hexagon::before {
		top: -86px;
		border-left: 150px solid transparent;
		border-right: 150px solid transparent;
		border-bottom: 87px solid #1e1e1e;
	}
	.hexagon::after {
		bottom: -86px;
		border-left: 150px solid transparent;
		border-right: 150px solid transparent;
		border-top: 87px solid #1e1e1e;
	}
	ul li{margin-bottom: 200px;}
}