A Pen by Henry Zhu.

index.html

<div class="hearts">
  <div class="orange"></div>
  <div class="green"></div>
  <div class="blue"></div>  
</div>



<!--<img src="http://i.imgur.com/wtAUnyG.png">-->

LOYAL3-hearts-II.markdown

LOYAL3 hearts II

A Pen by Henry Zhu on CodePen.

License.

style.css

.hearts {
  width: 205px;
  margin: 50px auto;
}

.green{ 
	width: 72px;
	height: 70px;
	position: relative; 
	display: block;
	overflow: hidden;
	-webkit-border-radius: 50px;
	-webkit-border-top-right-radius: 0;
	-webkit-transform: rotate(135deg);
	-webkit-transition: all 1s;
  left: 63px;
  z-index: 9999;
}

.green { background : rgb(84,109,16); }

.orange { 
	position: relative;
}
.orange:before, .orange:after {
	position: absolute;
  content: "";
	left: 70px; top: 5px;
	width: 70px;
	height: 111px;
	background: orange;
	-moz-border-radius: 50px 50px 0 0;
	border-radius: 50px 50px 0 0;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transform-origin: 0 100%;
	-moz-transform-origin: 0 100%;
	-ms-transform-origin: 0 100%;
	-o-transform-origin: 0 100%;
	transform-origin: 0 100%;
}
.orange:after { 
	left: 0; 
	-webkit-transform: rotate(45deg); 
	-moz-transform: rotate(45deg); 
	-ms-transform: rotate(45deg); 
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-ms-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin :100% 100%;
}

.blue { 
	position: relative;
  left: 62px;
  top: -66px;
}

.blue:before, .blue:after {
	position: absolute;
  content: "";
	left: 70px; top: 0;
	width: 70px;
	height: 115px;
	background: rgb(91,181,225);
	-moz-border-radius: 50px 50px 0 0;
	border-radius: 50px 50px 0 0;
	-webkit-transform: rotate(-45deg);
	-webkit-transform-origin: 0 100%;
}
.blue:after { 
	left: 0; 
	-webkit-transform: rotate(45deg); 
	-moz-transform: rotate(45deg); 
	-ms-transform: rotate(45deg); 
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
	-webkit-transform-origin: 100% 100%;
	-moz-transform-origin: 100% 100%;
	-ms-transform-origin: 100% 100%;
	-o-transform-origin: 100% 100%;
	transform-origin :100% 100%;
}