CodePen Embed - CSS Lighthouse

// Based on an illustration by Al Power https://dribbble.com/shots/3982873-Peggy-s-Cove-Nova-Scotia-Canada

.box
	.bg-circle
	.base
		.base-shadow
	.tower-base
		.tower-base-shadow
	.entrance-container
		.entrance-roof
		.entrance-front
			.entrance-door
		.entrance-side
			.entrance-window
	.tower-container
		.tower
			.dark-side
				.window.top
				.window.middle
				.window.bottom
			.light-side
		.tower-top
			.dark-side
			.light-side
			.shadow-from-platform
		.tower-platform
			.shadow
		.lantern-pane
			.dark-side
			.light-side
			.window
				.reflection.thick
				.reflection.thin
				.frame-left
				.frame-right
		.platform-fence
			.rope
			.rope
			.rope
			.pole
			.pole
			.pole
			.pole
		.cupola
			.light
			.shadow
		.solarvalve
			.tube
				.shadow
				.light
			.hat
			.spike
		.shadow-from-entrance
			.window-bottom
	.fence
		- for (var x = 0; x < 20; x++)
			.pole
	.vertical-pole.top
	.vertical-pole.bottom
.link
	span Original design by
	a(href='https://dribbble.com/shots/3982873-Peggy-s-Cove-Nova-Scotia-Canada' target='_blank')  Al Power

View Compiled

// === Colors ===
$bright-red: #df4a4a;
$med-red: #e1696b;
$light-red: #e3797b;
$base-color: #e9ebea;
$shadow-base: #a5b7cc;
$shadow-dark: #6185af;
$shadow-med: #a5b7cc;
$shadow-light: #e9ebea;
$tower-wall: #f5f9fb;
$window-dark: #34465d;
$window-light: #d4d5eb;
// Shadow from base #b3c2d2

// === Dimensions ===

// Tower
$base-height: 2.5%;
$tower-base-width: 40%;
$tower-height: 60%;
$tower-width: 32%;
$top-base-ratio: 0.8;
$slanted-part-height: $tower-height * (1/9);
$height-to-platform: 3 * $base-height + $tower-height + $slanted-part-height;

// Entrance
$entrance-height: 0.33 * $tower-height;

// Platform
$platform-width: $tower-base-width * 0.9;

// Lantern pane
$lantern-pane-width: ($tower-base-width * 0.53);
$lantern-pane-height: 12%;

// Cupola
$cupola-width: $lantern-pane-width * 1.2;

// - - - - - - - - - - MIXINS - - - - - - - - - -

@mixin centerX() {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

@mixin center() {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

// - - - - - - - - - - - - - - - - - - - - - - - - - 

.box {
	width: 650px;
	height: 650px;
	background-color: #fff;
	position: relative;
	margin: 0 auto;
	margin-top: 3em;
}

.link {
	padding-top: 1.5em;
	margin: 0 auto;
	text-align: center;
}

.bg-circle {
	width: 92%;
	height: 92%;
	background-color: #c4eaff;
	border-radius: 50%;
	position: absolute;
	top: 3%;
	right: 4%;
	
	background: linear-gradient(-25deg, #c2d0ed 10%, #d1e0ff 20%, #fff 90%);
}

.base {
	background-color: $base-color;
	width: 100%;
	height: $base-height;
	position: relative;
	top: 100% - $base-height;
}

.base-shadow {
	height: 100%;
	width: 20%;
	position: absolute;
	right: 0px;
	background-color: $shadow-base;
}

// ==== ENTRANCE ====

.entrance-container {
	overflow: hidden;
	
	z-index: 3;
	position: absolute;
	bottom: $base-height;
	left: 50% - ($tower-width / 6) + 0.1%;
	height: $entrance-height;
	width: 0.37 * $tower-base-width;
	transform: translateX(-100%); // Use parts own width to position it.
}

.entrance-roof {
	z-index: 5;
	
	background-color: $shadow-med;
	width: 63%;
	height: 30%;
	position: absolute;
	left: 18%;
	transform: skewX(-44deg);
}

.entrance-front {
	background-color: $tower-wall;
	height: 70%;
	width: 63%;
	position: absolute;
	bottom: 0;
	
	.entrance-door {
		height: 83%;
		width: 75%;
		position: absolute;
		left: 9%;
		bottom: 0;
		border: 2px solid $shadow-light;
		border-bottom: none;
	}
}

.entrance-side {
	background-color: $shadow-dark;
	height: 100%;
	width: 38%;
	position: absolute;
	right: 0;
	z-index: 4;
	
	.entrance-window {
		background-color: $window-dark;
		width: 40%;
		height: 28%;
		
		position: absolute;
		top: 50%;
  	left: 50%;
  	transform: translate(-50%, -15%)
		
	}
}

.shadow-from-entrance {
	background-color: $shadow-med;
	z-index: 3;
	position: absolute;
	bottom: 0;
	left: 50% - ($tower-width/6);
	bottom: $base-height;
	width: 8%;
	height: 0.33 * $tower-height;
	clip-path: polygon(100% 30%, 100% 87%, 50% 100%, 0 100%, 0 0);
	-webkit-clip-path: polygon(100% 30%, 100% 87%, 50% 100%, 0 100%, 0 0);
	overflow: visible;
	
	.window-bottom {
		height: 17%;
		width: 60%;
		position: absolute;
		top: 53%;
		right: 4%;
		
		background-color: $window-dark;
	}
}


// ==== TOWER ====

.tower-base {
	background-color: $tower-wall;
	position: absolute;
	height: 2.5%;
	width: $tower-base-width;
	bottom: 2.5%; // == Base height
	@include centerX();
	
	.tower-base-shadow {
		width: 36.5%;
		height: 100%;
		right: 0;
		background-color: $shadow-dark;
		position: absolute;
	}
}

// Wrapper to make positioning the tower parts easier
.tower-container {
	
	// TODO?
	
}

.tower {
	overflow: hidden;
	
	position: absolute;
	bottom: 4.9%;
	background-color: $shadow-light;
	height: $tower-height;
	width: $tower-width;
	left: 34%;
	clip-path: polygon(15% 0%, 85% 0%, 100% 100%, 0% 100%); // width, height
	
	.dark-side, .light-side {
		width: (100% / 3);
		height: 100%;
		position: absolute;
	}
		
	.light-side {
		background-color: $tower-wall;
		left: 0;
	}
	
	.dark-side {
		background-color: $shadow-dark;
		right: 0;
		
		.window {
			background-color: $window-dark;
			width: 20%;
			height: 10%;
			position: absolute;
			transform: skew(3.5deg);
		}
		
		.window.top {
			top: 12%;
			left: 22.5%;
		}
			
		.window.middle {
			top: 42%;
			left: 30.5%;
		}

		.window.bottom {
			top: 72%;
			left: 38.5%;
		}
	}

	/* // DELETE
	.window-bottom {
		//z-index: ;
		background-color: $window-dark;
		height: 5%;
		width: 16%;
		position: absolute;
		left: 42%;
		bottom: 5%;
	}*/
		
}

.tower-top {
	width: $tower-base-width;
	height: $slanted-part-height + 0.1%;
	background-color: $shadow-light;
	position: absolute;
	bottom: $tower-height + 4.9%;
	right: (100% - $tower-base-width) / 2;
	
	clip-path: polygon(10% 0%, 90% 0%, 78% 100%, 22% 100%);
	
	.shadow-from-platform {
		background-color: $shadow-med;
		width: 100%;
		height: 100%;
		clip-path: polygon(10% 0%, 73.3% 0%, 63.5% 100%, 26.5% 0%);
	}
	
	.dark-side, .light-side {
		width: 31.5%;
		height: 100%;
		position: absolute;
	}
	
	.dark-side {
		background-color: $shadow-dark;
		right: 0;
		transform: skew(-30deg);
	}
	
	.light-side {
		background-color: $tower-wall;
		left: 0;
		transform: skew(30deg);
	}

}

.tower-platform {
	height: 2.5%;
	width: $platform-width;
	background-color: $tower-wall;
	position: absolute;
	bottom: $height-to-platform - $base-height;
	right: (100% - $tower-base-width * 0.9) / 2;
	
	.shadow {
		background-color: $shadow-base;
		height: 100%;
		width: 24%;
		float: right;
	}
	
}

.lantern-pane {
	position: absolute;
	height: 14%;
	width: $lantern-pane-width;
	background-color: $med-red;
	left: (100% - $lantern-pane-width) / 2;
	bottom: $height-to-platform;
	
	.dark-side, .light-side {
		z-index: 2;
		position: relative;
		height: 100%;
		width: (100% / 3);
	}
	
	.light-side {
		background-color: $light-red;
		float: left;
	}
	
	.dark-side {
		background-color: $bright-red;
		float: right;
	}

}

.window {
	position: relative;
	z-index: 3;
	background-color: $window-light;
	height: 55%;
	width: 92%;
	margin: 0 auto;
	
	// - - - Reflections on the window - - - 
	.reflection {
		z-index: 4;
		position: absolute;
		background-color: #fff; // TODO Update color
		height: 99%;
	}
	
	.reflection.thick {
		width: 30%;
		transform: skew(-20deg);
		left: 24%;
	}
		
	.reflection.thin {
		width: 7%;
		left: 60%;
		transform: skew(-20deg);
	}
	
	// - - - Window frame pieces - - - 
	.frame-left, .frame-right {
		z-index: 5;
		height: 100%;
		width: 3%;
		background-color: $med-red;
		position: absolute;
		top: 0;
	}
	
	.frame-left {
		left: (100% / 3) - 4%;
	}
	
	.frame-right {
		right: (100% / 3) - 4%;
	}
	
}

.platform-fence {
	z-index: 3;
	position: absolute;
	height: 7%;
	width: 0.80 * $platform-width;
	@include centerX();
	bottom: $height-to-platform;
	display: flex;
	justify-content: space-between;
	overflow: hidden;
	
	.pole {
		z-index: 4;
		height: 100%;
		width: 3%;
		//background-color: $tower-wall;
		background-color: lightgrey;
	}
	
	.rope {
		z-index: 3;
		position: absolute;
		bottom: 59%;
		background-color: transparent;
		width: 31.5%;
		padding-bottom: 15%;
		border-radius: 50%;
		border: 3.1px solid lightgrey;
	}
	
	.rope:nth-child(2) {
		@include centerX()
	}
	
	.rope:nth-child(3) {
		right: 0;
	}
}



/**
 * Use equation -(2/3)*((x+1/3)^2)+3 of a graph to calculate y values that
	correspond to x-values running from startX to endX
 *
 * @startconditions:
 * -> startX > endX
 * -> startX and endX are percentage (%) values
 * -> y values will run from 100 (paired with startX) to 0 (endX)
 * 
 * $direction: set to 1 for arch to right and to -1 for arch to left
 */
@function archedClipPath($startX, $endX, $pathStart) {
	// -(2/3) * ((x+1/3)^2) + 3
	$path: $pathStart;
	
	$x: $startX;
	
	@while $x > $endX {
		@if not ($path == '') {
			$path: $path + ',';
		}
		
		$y: -(7/8) * (( $x + 1/3) * ( $x + 1/3));
		$y: -0.95 * ($y / 10);
		$path: $path + $x + '% ' + $y + '%';
		
		$x: $x - 0.1;
	}
	@return unquote($path);
}

.cupola {
	z-index: 3;
	width: $cupola-width;
	height: 0.7 * $cupola-width;
	border-radius: 50%;
	background-color: $med-red;
	position: absolute;
	@include centerX();
	bottom: $height-to-platform + 3.2%;
	clip-path: polygon(0% 0%, 100% 0%, 100% 40%, 0% 40%);
	
	overflow: hidden;
	
	.light, .shadow {
		width: 50%;
		height: 50%;
		position: absolute;
		top: 0;
	}
	
	.light {
		background-color: $light-red;
		left: 0;
		
		transform: scaleX(-1); // Flip horizontally
		clip-path: polygon(archedClipPath(28.0, 4.5, '4.5% 0%, 100% 0%, 100% 100%, 28% 100% '));
	}
	
	.shadow {
		background-color: $bright-red;
		right: 0;
		
		clip-path: polygon(archedClipPath(28.0, 4.5, '4.5% 0%, 100% 0%, 100% 100%, 28% 100% '));
		// 4.5% 0%, 100% 0%, 100% 100%, 28% 100%
	}
}

.solarvalve {
	height: 5%;
	width: 4%;
	position: absolute;
	@include centerX();
	top: 0;
	overflow: visible;
	
	.tube, .hat, .spike {
		background-color: $med-red;
		@include centerX();
	}
	
	.tube {
		height: 75%;
		width: 70%;
		bottom: 0;
		
		.shadow, .light {
			height: 100%;
			width: (100%/3);
			position: absolute;
			top: 0;
		}
		
		.shadow {
			right: 0;
			background-color: $bright-red;
		}
		
		.light {
			left: 0;
			background-color: $light-red;
		}
	}
	
	.hat {
		width: 100%;
		height: 15%;
		bottom: 70%;
		background-color: $bright-red;
	}
	
	.spike {
		bottom: 70%;
		height: 1.1em;
		width: 15%;
		background-color: $bright-red;
		border-radius: 60% 60% 0% 0%;
	}
}

// ===== BASE FENCE =====

.fence {
	z-index: 3;
	width: $tower-base-width;
	height: 1.5 * $base-height;
	position: absolute;
	bottom: $base-height;
	@include centerX();
	
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	
	.pole {
		z-index: 4;
		background-color: $tower-wall;
		width: 2.5px;
		height: 100%;
	}
}

.vertical-pole {
	z-index: 5;
	background-color: $tower-wall;
	width: $tower-base-width;
	height: 2.5px;
	position: absolute;
	left: 0;
	@include centerX();
}

.vertical-pole.bottom {
	bottom: 1.35 * $base-height;
}

.vertical-pole.top {
	bottom: 2.1 * $base-height;
}

View Compiled

// https://dribbble.com/shots/3982873-Peggy-s-Cove-Nova-Scotia-Canada

This Pen is owned by Ossian on CodePen.

See more by @Rikkokiri on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.