csssecrets · December 13, 2021 02:21
diff --git a/dabblet.css b/dabblet.css
 /**
 * Diamond images — via transforms
 */

 .diamond {
 	width: 250px;
 	height: 250px;
 	transform: rotate(45deg);
 	overflow: hidden;
 	margin: 100px;
 }

 .diamond img {
 	max-width: 100%;
 	transform: rotate(-45deg) scale(1.42);
 	z-index: -1;
 	position: relative;
 }
diff --git a/dabblet.html b/dabblet.html
 <div class="diamond">
 	<img src="http://csssecrets.io/images/adamcatlace.jpg" />
 </div>
diff --git a/dabblet.js b/dabblet.js
 // alert('Hello world!');
diff --git a/settings.json b/settings.json
 {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
	/**
	* Diamond images — via transforms
	*/

	.diamond {
	width: 250px;
	height: 250px;
	transform: rotate(45deg);
	overflow: hidden;
	margin: 100px;
	}

	.diamond img {
	max-width: 100%;
	transform: rotate(-45deg) scale(1.42);
	z-index: -1;
	position: relative;
	}
	<div class="diamond">
	<img src="http://csssecrets.io/images/adamcatlace.jpg" />
	</div>