Вот тут на сайте 
https://vimeo.com/player
Плеер в шестиграннике, и по клику он превращается в прямоугольник.
как реализовать такую штуку, скажите пожалуйста в каком направлении читать(двигаться)??
Нашел как делать ромб на css 
<html>
<head>
<style type="text/css">
#hexagon {
	width: 100px;
	height: 55px;
	background: red;
	position: relative;
}
#hexagon:before {
	content: "";
	position: absolute;
	top: -25px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-bottom: 25px solid red;
}
#hexagon:after {
	content: "";
	position: absolute;
	bottom: -25px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 50px solid transparent;
	border-right: 50px solid transparent;
	border-top: 25px solid red;
}
</style>
</head>
<body>
<div id="hexagon"></div>
</body>
</html>
думал как то менять параметры, и что то выйдет из этого...увы пока ничего.