We would like to know how to create Smiley face with CSS3 shapes.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#face {<!--from w w w. j a va 2s .c o m-->
background: #EEE;
width: 50px;
padding: 10px 5px;
border-radius: 100px;
border: solid 5px green;
-webkit-box-shadow: 0px 0px 10px rgba(0, 110, 0, 0.5);
-webkit-background-clip: padding-box;
}
#eyes {
width: 100px;
height: 10px;
padding-left: 12px;
}
.eye {
height: 10px;
width: 10px;
display: inline-block;
border-radius: 5px;
background: blue;
}
#mouth {
height: 25px;
width: 50px;
background: transparent;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
border-bottom: solid 5px red;
display: block;
}
</style>
</head>
<body>
<div id="face">
<div id="eyes">
<div class="eye"></div>
<div class="eye"></div>
</div>
<div id="mouth"></div>
</div>
</body>
</html>
The code above is rendered as follows: