食べる

 html {
	height:100%;
}
body {
	height:100%;
	background:rgb(0,0,0);
	overflow:hidden;
	display:flex;
	justify-content:center;
	align-items:center;
}
main {
	width:400px;
	height:400px;
	/* border:5px dashed white;
	*/
            position:relative;
	/* overflow:hidden;
	*/
            /* transform:rotate(-10deg);
	*/
}
h1 {
	margin:-50px auto;
	padding:0;
	font-size:50px;
	color:white;
	position:absolute;
	left:135px;
	top:180px;
	cursor:default;
	opacity:0;
	transition-duration:1s;
}
div {
	width:0;
	height:0;
	border-bottom:0px solid transparent;
	border-left:50px solid transparent;
	border-right:50px solid transparent;
	border-top:300px solid #F1203C;
	opacity:1;
	position:absolute;
	left:150px;
	top:70px;
	transform-origin:50% 75%;
	transition-duration:1s;
	transition:2s;
}
div::after {
	content:"";
	display:block;
	border-top:0px solid transparent;
	border-left:50px solid transparent;
	border-right:50px solid transparent;
	border-bottom:50px solid #FFEC49;
	position:absolute;
	top:-350px;
	left:-50px;
}
div::before {
	content:"";
	display:block;
	width:15px;
	height:15px;
	border-radius:50%;
	background:white;
	position:absolute;
	left:-7px;
	top:-80px;
	z-index:1;
}
main:hover  div:nth-child(1) {
	transform:rotate(-85deg);
}
main:hover  div:nth-child(2) {
	transform:rotate(-60deg);
	border-top:300px solid #FF3A25;
}
main:hover  div:nth-child(3) {
	transform:rotate(-35deg);
	border-top:300px solid #FF5619;
}
main:hover  div:nth-child(4) {
	transform:rotate(-10deg);
	border-top:300px solid #FF9C00;
}
main:hover  div:nth-child(5) {
	transform:rotate(15deg);
	border-top:300px solid #FF9C00;
}
main:hover  div:nth-child(6) {
	transform:rotate(40deg);
	border-top:300px solid #FF5619;
}
main:hover div:nth-child(7) {
	transform:rotate(65deg);
	border-top:300px solid #FF3A25;
}
main:hover div:nth-child(8) {
	transform:rotate(90deg);
	border-top:300px solid #F1203C;
}
main:hover h1 {
	transition:4s;
	opacity:1;
}