.content
	.row
		.thumbnail.lrg
			.document style="--thumb-url: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/document.jpg)"
				img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/document.jpg" 
		.thumbnail.lrg
			.document style="--thumb-url: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/isometric.png)"
				img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/isometric.png" 
	.row
		.thumbnail.med
			.document style="--thumb-url: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/document.jpg)"
				img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/document.jpg" 
		.thumbnail.med
			.document style="--thumb-url: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/isometric.png)"
				img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/isometric.png" 				
	.row
		.thumbnail.sml
			.document style="--thumb-url: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/document.jpg)"
				img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/document.jpg" 
		.thumbnail.sml
			.document style="--thumb-url: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/isometric.png)"
				img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/isometric.png" 	
	.row
		a href="https://codepen.io/scootman/pen/rYjEzW" target="_blank" Exploded iso explainer
				
View Compiled
// Inspired by Chris's post: https://css-tricks.com/css-attr-function-got-nothin-custom-properties/
// More verbose (sans custom properties) IE11 compatible version: https://codepen.io/scootman/pen/KyaEXp/
// Hatch on hover used to prove corner is transparent! (more on gradient hatches here: https://codepen.io/scootman/pen/NvLLYr)

@font-face {
  font-family: 'barlow';
  src: font-url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/436544/Barlow-Regular.woff') format('woff');
  font-weight:400;
  font-style:normal;
}


body {
	background-color:hsl(240,5%,93%);
	display:flex;
	align-items:center;
	height:100vh;
	font-family:'barlow',sans-serif;
}

.content {
	margin:0 auto;
}

.row {
	display:flex;
	justify-content:center;
}

.thumbnail {
	display:flex;
	justify-content:center;
	align-items:center;
	height:128px;
	width:128px;
	font-size:12px;
	margin:1em;
	position:relative;
	&.sml {
			font-size:8px;
			height:64px;
			width:64px;
		img {
			max-width:64px;
			max-height:64px;
		}
	}
	&.lrg {
		font-size:18px;
		height:256px;
		width:256px;
		img {
			max-width:256px;
			max-height:256px;

		}
	}
	.document {
		position:relative;
		background-image:linear-gradient(-135deg,transparent 0%, transparent 50%, hsl(240,5%,80%) 50%, white 62.5%, white 100%);
		background-size: 1.5em 1.5em;
		background-position: right .125em top .125em;
		background-repeat:no-repeat;
		&::before {
			content:"";
			position:absolute;
			background-image:linear-gradient(-90deg,hsla(240,5%,0%,.15),transparent),var(--thumb-url);
			background-size:.33em 1.5em, cover;
			background-position:top right,left center;
			background-repeat:no-repeat,no-repeat;
			top:0;
			height:100%;
			right:1.5em;
			left:0;
			border-top-right-radius:.4em;
		}
		&::after {
			content:"";
			position:absolute;
			background-image:linear-gradient(hsla(240,5%,0%,.15),transparent),var(--thumb-url);
			background-size:1.65em .33em, cover;
			background-position:top right,center bottom;
			background-repeat:no-repeat,no-repeat;
			top:1.5em;
			bottom:0;
			right:0;
			left:0;
			border-top-right-radius:.4em;
		}
	}
	img {
		display:block;
		max-width:128px;
		max-height:128px;
		visibility:hidden;
	}
	&::before {
    opacity:0;
    content:"";
    position:absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    z-index:-1;
    background-image:repeating-linear-gradient(-45deg,transparent, transparent 30%, currentColor 30%, currentColor 50%,transparent 50%); 
    background-size:4px 4px; 
    border-radius:3px;
    transition:.15s ease-in-out;
  }
  &:hover::before {
    left:-.5em;
    right:-.5em;
    top:-.5em;
    bottom:-.5em;
    opacity:.125;
  }
}

a {
	display:block;
	color:inherit;
	text-decoration:none;
	opacity:.5;
	font-size:14px;
	padding:1em;
}
View Compiled
// To avoid repetition of img url — a js function could be used to append part-1 & part-2 based on img src and parent class
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.