Hexagon on CSS

hexagon.html

<div class="hex">
	<div class="hex-part">
		<div class="hex-cont">
			<p>content</p>
		</div>
	</div>
</div>

hexagon.styl

.hex
	width 200px
	height 100px
	transform rotate(120deg)
	position relative
	overflow hidden
	visibility hidden
	display block
	text-decoration none
	.hex-part
		width 100%
		height 100%
		transform rotate(-60deg)
		overflow hidden
	.hex-cont
		width 100%
		height 100%
		background orange
		transform rotate(-60deg)
		text-align center
		visibility visible

// Для смены вида нужно высоту и ширину поменять местами
// display block — если встраивать стили к ссылкам и другим неблочным элементам