<div class="controls">
	<div class="controls__group">
		<label for="height">Adjust height</label>
		<input id="height" type="range" min="100" max="300" step="5" data-slider>
	</div>
	<dl>
		<div class="controls__group">
			<dt>Angle:</dt>
			<dd data-angle></dd>
		</div>
		<div class="controls__group">
			<dt>Side length:</dt>
			<dd data-length></dd>
		</div>
	</dl>
</div>

<div class="container">
	<div class="shape">
		<div class="shape__side"></div>
		<div class="shape__side"></div>
		<div class="shape__side"></div>
		<div class="shape__side"></div>
		<div class="shape__base"></div>
	</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");

* {
	box-sizing: border-box;
}

body {
	font-family: "Open Sans", sans-serif;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: radial-gradient(rgba(37, 36, 43, 1), rgba(0, 0, 0, 0) 60%), rgba(24, 21, 33, 1);
}

.container {
	--w: min(90vmin, 10rem);
	
	/* Hypoteneuse */
	--h: min(180vmin, 20rem);
	
	/* Opposite side – as the points meet in the middle */
	--o: calc(var(--w) / 2);
	
	transform-style: preserve-3d;
	perspective-origin: center -100%;
	perspective: 100rem;
	backface-visibility: hidden;
	width: var(--w);
	height: var(--h);
	margin: 0 auto;
}

.shape {
	position: relative;
	width: var(--w);
	height: var(--h);
	top: 100%;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	perspective: 300rem;
	transform: rotateY(45deg) translateY(-100%);
	
	> * {
		--c1: hsl(277deg, 82%, var(--l1, 56%));
		--c2: hsl(252deg, 85%, var(--l2, 56%));
		
		position: absolute;
		inset: 0;
	}
}

.shape__base {
	position: absolute;
	inset: auto auto 0 0;
	width: var(--w);
	height: var(--w);
	background: var(--bg);
	transform-origin: bottom center;
	transform: translateZ(-5rem) rotateX(-90deg);
	
	&::after {
		content: '';
		position: absolute;
		inset: auto auto 0 0;
		width: var(--w);
		height: var(--w);
		transform: scale(2);
		background: radial-gradient(circle at center, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 65%);
	}
}

.shape__side {
	--path: polygon(50% 0, 100% 100%, 0 100%);
	
	width: var(--w);
	height: var(--h);
	background: 
		linear-gradient(45deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)),
		radial-gradient(circle, orchid, orchid 0.15rem, transparent 0), 
		linear-gradient(var(--c1), var(--c2));
	background-size: 100% 100%, 0.75rem 1.75rem, 100% 100%;
	-webkit-clip-path: var(--path);
	clip-path: var(--path);
	transform-origin: top center;
	transform: 	
		rotateY(var(--ry, 0)) 
		rotateX(var(--angle, 15deg));
	
	&:nth-child(2) {
		--ry: 90deg;
	}
	
	&:nth-child(3) {
		--ry: -90deg;
	}
	
	&:nth-child(4) {
		--ry: 180deg;
	}
}

@keyframes spin {
	100% {
		transform: rotateY(360deg);
	}
}

/* Controls */
.controls {
	position: fixed;
	top: 0;
	left: 0;
	background: rgba(236, 235, 240, 1);
	border-radius: 0.4rem;
	margin: 1rem;
	padding: 1rem;
	box-shadow: 0.2rem 0.2rem 1rem rgba(0, 0, 0, 1);
}

.controls__group {
	display: grid;
	grid-template-columns: 7rem 1fr;
	align-items: center;
}

label {
	margin: 0;
}

dl {
	margin-bottom: 0;
}
View Compiled
const shape = document.querySelector('.shape')
const input = document.querySelector('[data-slider]')
const angleText = document.querySelector('[data-angle]')
const lengthText = document.querySelector('[data-length]')

const radToDeg = (radians) => {
	return radians * (180 / Math.PI)
}

const setAngles = () => {
	const o = shape.clientWidth / 2
	const h = input.value
	const radians = Math.asin(o / h)
	const angle = radToDeg(radians).toFixed(2)
	
	shape.style.setProperty('--h', `${h}px`)
	shape.style.setProperty('--angle', `${radians}rad`)
	angleText.innerText = `${angle}deg, ${radians.toFixed(2)}rad`
	lengthText.innerText = `${h}px`
}

setAngles()

input.addEventListener('input', setAngles)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.