* {
	box-sizing: border-box;
}

body {
	background: #cccccc;
}

.canvas {
	width: 900px;
	height: 556px;
	margin: 100px auto;
	background: white;
	position: relative;
}

.vase {
	position: absolute;
	left:500px;
	top: 300px;
	opacity: .7;
}

#bowl {
	top: 60px;
	position: absolute;
	display:block;
	width: 126px;
	height: 120px;
	background-color: green;
	opacity: .7;
	-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
	border-radius:         50%  50%  50%  50%  / 60%   60%   40%  40%;
}

#neck {
	top:-1px;
	left: 54px;
	position: absolute;
	width: 20px;
	height: 62px;
	background: green;
	opacity: .7;
}

.stem {
	left: 559px;
	top: 249px;
	position: absolute;
	width: 10px;
	height: 230px;
	background: #9ACD32;
	transform: rotate(175deg);
}


#dome {
	position: absolute; 
	left: 220px;
	top: 340px;	
	width: 0px;
	height: 0px;
	border-right: 80px solid transparent;
	border-top: 80px solid #F5F5F5;
	border-left: 80px solid #F5F5F5;
	border-bottom: 80px solid #F5F5F5;
	border-top-left-radius: 80px;
	border-top-right-radius: 80px;
	border-bottom-left-radius: 80px;
	border-bottom-right-radius: 80px;
	transform: rotate(90deg);
}

#base {
	position: absolute; 
	left: 242px;
	top: 386px;
	width: 0;
	height: 0;
	border-left: 57px solid transparent;
	border-right: 57px solid transparent;
	border-bottom: 90px solid #F5F5F5;
}

#triangle {
	position: absolute;
	left: 512px;
	top: 180px;
	width: 110px;
	height: 100px;
	background: orange;
	-webkit-clip-path: polygon(19% 83%, 37% 100%, 36% 80%, 0 13%);
	clip-path: polygon(19% 83%, 37% 100%, 36% 80%, 0 13%);
}

#pinapplebody {
	position: absolute; 
	left: 400px;
	top: 380px;
	width: 80px;
	height: 110px;
	background: rgba(61,135,12,1);
	background: -moz-linear-gradient(top, rgba(61,135,12,1) 0%, rgba(191,194,103,1) 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(61,135,12,1)), color-stop(100%, rgba(191,194,103,1)));
	background: -webkit-linear-gradient(top, rgba(61,135,12,1) 0%, rgba(191,194,103,1) 100%);
	background: -o-linear-gradient(top, rgba(61,135,12,1) 0%, rgba(191,194,103,1) 100%);
	background: -ms-linear-gradient(top, rgba(61,135,12,1) 0%, rgba(191,194,103,1) 100%);
	background: linear-gradient(to bottom, rgba(61,135,12,1) 0%, rgba(191,194,103,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3d870c', endColorstr='#bfc267', GradientType=0 );
	-moz-border-radius:    30px;
	-webkit-border-radius: 30px;
	border-radius:         30px;
}

#pinapplehead{
	position: absolute;
	left: 310px;
	top: 120px;
	width: 250px;
	height: 250px;
	background: green;
	transform:rotate(30deg);
	-webkit-clip-path: polygon(94% 73%, 99% 73%, 76% 79%, 70% 54%, 65% 72%, 60% 31%, 50% 67%, 22% 69%, 53% 78%, 41% 88%, 75% 100%, 84% 95%);
	clip-path: polygon(94% 73%, 99% 73%, 76% 79%, 70% 54%, 65% 72%, 60% 31%, 50% 67%, 22% 69%, 53% 78%, 41% 88%, 75% 100%, 84% 95%);
}


#triangle2 {
	position: absolute;
	left: 507px;
	top: 170px;
	width: 110px;
	height: 100px;
	background: orange;
	transform: rotate(-5deg);
	-webkit-clip-path: polygon(85% 13%, 70% 66%, 45% 84%, 45% 67%);
	clip-path: polygon(85% 13%, 70% 66%, 45% 84%, 45% 67%);
}


#triangle3 {
	position: absolute;
	left: 492px;
	top: 80px;
	width: 190px;
	height: 180px;
	transform: rotate(50deg);
	background: orange;
	-webkit-clip-path: polygon(43% 81%, 7% 53%, 50% 76%, 44% 57%, 73% 91%, 81% 100%, 64% 95%, 15% 81%);
clip-path: polygon(43% 81%, 7% 53%, 50% 76%, 44% 57%, 73% 91%, 81% 100%, 64% 95%, 15% 81%);
}


#trapezoid {
	position: absolute;
	left: 90px;
	top: -30px;
	width: 600px;
	height: 600px;
	background: #ff4dac;
-webkit-clip-path: polygon(33% 69%, 5% 94%, 90% 94%, 100% 69%);
clip-path: polygon(33% 69%, 5% 94%, 90% 94%, 100% 69%);
}