A Pen by Nick Spiel.

3D-CSS-Diamond.markdown

3D CSS Diamond

An entirely pointless pen used to understand how transforms and gradients work together. Based on the Sketch logo.

A Pen by Nick Spiel on CodePen.

License.

index.html

<div class="diamond">
	<div class="diamond-wrapper">
		<div class="left">
			<div class="mid"></div>
			<div class="main"></div>
			<div class="top-top"></div>
			<div class="top"></div>
			<div class="top-cap"></div>
			<div class="overlay"></div>
			<div class="top-inner"></div>
			<div class="top-outer"></div>
		  <div class="top-mid"></div>
		</div>
		<div class="right">
			<div class="mid"></div>
			<div class="main"></div>
			<div class="top-top"></div>
			<div class="top"></div>
      <div class="top-cap"></div>
			<div class="overlay"></div>
			<div class="top-inner"></div>
			<div class="top-outer"></div>
			<div class="top-mid"></div>
		</div>
		<div class="shine-1"></div>
		<div class="shine-2"></div>
    <div class="shine-3"></div>
  </div>
</div>

script.js

/* 
  Pure CSS / HTML 3D Diamond
  Features:
  
    # No real commercial use
    # Nested divs providing no sematic value
    # No regard for accessiblity

*/

style.scss

@import "compass";

body {
	background-color: white;
	border: 0;
	margin: 0;
}

.diamond {
	background-size: contain;
	background-position: center top;
	position: relative;
	top: 20px;
	left: 50%;
	margin-left: -135px;
	height: 245px;
	width: 270px;
	opacity: 0.9;
	.right {
		// Flip container to match on the right
		@include transform(scaleX(-1) translateX(-3px));		
	}
	.left,
	.right {
		div {
			position: absolute;
		}
		.mid {
			width: 122px;
			height: 152px;
			left: 15px;
			top: 86px;
			@include background-image(linear-gradient(-129deg, #E6E6F9 0px, #B3B2BE 50%, rgba(0, 0, 0, 0) 50%));
		}
		.main {
			width: 89px;
			height: 151px;
			left: 47px;
			top: 86px;
			@include background-image(linear-gradient(-121deg, #C0C0C0 0px, #A09AA9 50%, rgba(0, 0, 0, 0) 50%));
			border-right: solid 1px #A09AA9;
		}
		.top-cap,
		.overlay {
			left: 66px;
			top: 16px;
			height: 41px;
			width: 72px;
			box-shadow: inset 0 0 10px 0 rgba(white, 0.6);
			@include background-image(linear-gradient(-71deg, #84839F 0px, #A39CB0 55%, #A2919B 55%, #B3B3B3 100%, rgba(0, 0, 0, 0) 50%));
			@include transform(skew(-5deg, 0deg));
			&.overlay {
				opacity: 0.5;
				@include background-image(linear-gradient(35deg, #84839F 0px, #A39CB0 55%, #A2919B 55%, #B3B3B3 100%, rgba(0, 0, 0, 0) 50%));
			}
		}
		.top {
			left: 79px;
			top: 10px;
			height: 6px;
			width: 69px;
			@include transform(skew(-75deg, 0deg));
			@include background-image(linear-gradient(72deg, #7B557B 0px, #81828B 100%, rgba(0, 0, 0, 0) 50%));
		}
		.top-top {
			left: 91px;
			top: 7px;
			height: 8px;
			width: 46px;
			@include transform(skew(0deg, -8deg));
			@include background-image(linear-gradient(72deg, #665E65 0px, #7E5F5A 100%, rgba(0, 0, 0, 0) 50%));
		}
		.top-inner {
			width: 146px;
			height: 60px;
			left: 66px;
			top: 57px;
			@include transform(skew(-18deg, 10deg));
			@include background-image(linear-gradient(72deg, #E7FCEC 0px, #CBC5D6 50%, rgba(0, 0, 0, 0) 50%));
		}
		.top-outer {
			width: 36px;
			height: 26px;
			left: 25px;
			top: 21px;
			@include transform(skew(-60deg, -66deg) rotate(27deg));
			@include background-image(linear-gradient(72deg, #4D4D61 0px, #240B24 50%, rgba(0, 0, 0, 0) 50%));
		}
		.top-mid {
			width: 67px;
			height: 50px;
			left: 41px;
			top: 51px;
			@include transform(skew(-46deg, 24deg));
			@include background-image(linear-gradient(72deg, #666675 0px, #A492A0 50%, rgba(0, 0, 0, 0) 50%));
		}
	}

	// --------------------- Shines

	.shine-1 {
		border-radius: 40px;
	    height: 40px;
	    left: 40px;
	    position: absolute;
	    top: 86px;
	    width: 40px;
		@include background-image(radial-gradient(rgba(white, 1), rgba(white, 0) 50%));
	}
	.shine-2 {
		border-radius: 50px;
	    height: 50px;
	    left: 112px;
	    opacity: 0.6;
	    position: absolute;
	    top: 32px;
	    width: 50px;
		@include background-image(radial-gradient(rgba(white, 1), rgba(white, 0) 60%));
	}
	.shine-3 {
		border-radius: 20px;
	    height: 40px;
	    left: 194px;
	    position: absolute;
	    top: 84px;
	    width: 40px;
		@include background-image(radial-gradient(rgba(white, 1), rgba(white, 0) 30%));
	}
}