<html>
  <body>
    <h1 class="header">Magic 888 ball!</h1>
<div class="wrapper">
	<div class="ball"><div class="triangle"><div id="tritext">Enter a question and click Ask Me</div></div></div>
	<form>
		<textarea style="width: 20em"></textarea>
	</form>
	<button onclick="askBall()">Ask me</button>
</div>
  </body>
body { 
			background-color: black;
		}

		.header {
			color: #F00;
			text-align: center;
			text-shadow: 3px 3px 15px #F00;
		}

		.wrapper {
			margin: auto;
			text-align: center;
		}

		.ball {
			margin: auto;
			width: 30em;
			height: 30em;
			clip-path: circle(50% at 50% 50%);
			box-shadow: 10px 10px 50px 35px inset #F00;
			background: rgb(2,0,36);
			background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(162,26,26,1) 60%);
			background-position: 32em -3em;
			opacity: 100%;
			z-index: 30;
		}

		.triangle {
			position: relative;
			top: 15%;
			margin: auto;
			background-color: #222;
			width: 12em;
			height: 12em;
			clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
			box-shadow: 0px 0px 18px 12px inset #200;
			z-index: 50;
			padding: .6em;
		}

		#tritext {
			width: 50%;
			margin: auto;
			color: red;
			text-align: center;
			padding-top: 50%;
			padding-bottom: 20%;
			margin-bottom: auto;
			word-wrap: break-word;
			opacity: 90%;
			text-shadow: 1px 1px 8px maroon;
			z-index: 60;
		}

		form {
			padding-top: 2em;
		}

		textarea { 
			background-color: black;
			color: red;
			border: 1px solid #f00;
		}

		button {
			width: 10em;
			height: 4em;
			margin: auto;
			border: 1px solid #f00;
			background-color: black;
			color: #f00;
			font-size: 18pt;
			border-radius: 1em;
		}
function askBall() {
		var responses = ["Who Knows?", "Probably", "What the heck", "Definitely"];
		value = (getRndInteger(1, 4) - 1);
		document.getElementById("tritext").innerHTML = responses[value];
	}
	
	function getRndInteger(min, max) {
		return Math.floor(Math.random() * (max - min + 1) ) + min;
	}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.