Edit in JSFiddle

<div class="isosceles-triangle-up">&nbsp;</div>
<div class="circle">&nbsp;</div>
<div class="trapezoid">&nbsp;</div>
<div class="pacman">&nbsp;</div>
<div class="painted-egg">&nbsp;</div>

/*Just for spacing around shapes*/
div {
  margin: 20px 0;
}

/*Shape CSS*/
.isosceles-triangle-up {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid #1434c7;
}
.circle {
  width: 50px;
	height: 50px;
	border-radius: 25px;
  background-color: #651296;
}
.trapezoid {
  width: 50px;
  height: 0;
  border-right: 25px solid transparent;
	border-bottom: 50px solid #fd9427;
	border-left: 25px solid transparent;
}
.pacman {
  width: 0;
  height: 0;
  border-radius: 50px;
  border-top: 50px solid #fec92e;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #fec92e;
  border-left: 50px solid #fec92e;
}
.painted-egg {
  width: 75px;
  height: 100px;
  border-radius: 50% / 60% 60% 40% 40%;
  /*With a little gradient flare, sat on an angle*/
  background: linear-gradient(315deg, rgba(36,5,58,1) 0, rgba(36,5,58,1) 25%, rgba(229,39,156,1) 75%, rgba(229,39,156,1) 100%);
}