hexagon clip-path

dabblet.css

/**
 * hexagon clip-path
 */

div
{
	width: 400px;
	height: 346px; /* ½√3 × width */
	position: relative;
	overflow: hidden;
	
	-webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
	clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);

	-moz-clip-path: url(#hexagon);
	clip-path: url(#hexagon);
}

img
{
	position: absolute;
	left: -270px;
	top: -210px;
}

dabblet.html

<div>
	<img src="https://upload.wikimedia.org/wikipedia/commons/1/17/Vitruvian.jpg" alt="Vitruvian Man by Leonardo da Vinci"/>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 346">
	<clipPath id="hexagon">
		<polygon points="100 0, 300 0, 400 173, 300 346, 100 346, 0 173"/>
	</clipPath>
</svg>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"","page":"css"}