kreativan
4/21/2019 - 9:48 PM

CSS Hexagon

<style>
	.hex {
		overflow:hidden;
		width: 350px;
		height:500px;
		background: transparent;
		transform: rotate(-67deg) skewY(45deg) translatez(-1px);
	}
	.hex-in {
		width:100%;
		height:100%;
		transform: skewY(-45deg) rotate(67deg);
	}
	.hex-in img {
		width:100%;
		height:100%;
		object-fit:cover;
	}
</style>

<div class="hex">
	<div class="hex-in">
		<img src="image.jpg" />
	</div>
</div>