<html>
<head>
<style>
body {
	background-color: #9cf;
}
.cloud{ 
position: relative; width: 100px; height: 90px;
position: absolute; 
content: "";
left:100px;  
top: 100px; 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
transform: rotate(45deg); 
}
 
.cloud:before, 
.cloud:after { 
position: absolute; 
content: ""; 
left: 50px; 
top: 0; 
width: 50px; 
height: 80px; 
background: white;
box-shadow: inset 0px 10px 7px -5px lightblue;
-moz-border-radius: 50px 50px 0 0; 
border-radius: 50px 50px 0 0; 
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
transform: rotate(-45deg); 
-webkit-transform-origin: 0 100%; 
-moz-transform-origin: 0 100%; 
transform-origin: 0 100%; 
}
 
.cloud:after { 
left: 0; 
-webkit-transform: rotate(45deg); 
-moz-transform: rotate(45deg); 
transform: rotate(45deg); 
-webkit-transform-origin: 100% 100%; 
-moz-transform-origin: 100% 100%; 
transform-origin :100% 100%;
 
} 
.cloud2{ 
position: relative; width: 100px; height: 90px;
position: absolute; 
content: "";
left:53px;  
top: 100px; 
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
transform: rotate(-45deg); 
}
 
.cloud2:before, 
.cloud2:after { 
position: absolute; 
content: ""; 
left: 50px; 
top: 0; 
width: 50px; 
height: 80px; 
background: white;
box-shadow: inset 0px 10px 7px -5px lightblue;  
-moz-border-radius: 50px 50px 0 0; 
border-radius: 50px 50px 0 0; 
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
transform: rotate(-45deg); 
-webkit-transform-origin: 0 100%; 
-moz-transform-origin: 0 100%; 
transform-origin: 0 100%; 
}
 
.cloud2: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%; 
transform-origin :100% 100%; 
} 

</style>
</head>
<body>
<center>
	<div class="cloud"></div>
		<div class="cloud2"></div>
</center>
</body>
</html>