A Pen by seth kontny.

index.html

<div id="pearl"></div>

Pearl---Pin-Icon---One-Element.markdown

Pearl / Pin Icon - One Element

Inspired by - http://dribbble.com/shots/1222185-Pearl-Pin-Icon

On the First shot i like the design and thought to convert it into real live object.

I have added small animation to show open/close wings effect ;-)

I hope you people like it.

And YES its a single element experiment.

Thanks in Advance.

A Pen by seth kontny on CodePen.

License.

style.css

body {
  padding:0px;
  background:#fff;
}

#pearl
{
position:absolute;
width:15em;
height:15em;
border-radius:50%;
background:#1FB0FF;
margin:1em 40% 0em;
box-shadow:-8em 2em 0em 0em #0095E5, 8em 2em 0em 0em #54C3FF;
-webkit-animation:bigwing 2s infinite;
-moz-animation:bigwing 2s infinite;
-o-animation:bigwing 2s infinite;
-ms-animation:bigwing 2s infinite;
animation:bigwing 2s infinite;
}

#pearl:before
{
content:"";
width:14em;
height:7em;
background: #A2DFFF;
left: 13.1em;
top: 10em;
border-radius: 50% 50% 0% 0%/100% 100% 0% 0%;
position:absolute;
z-index:-1;
box-shadow:-26.3em 0em 0em 0em #0074B2;
-webkit-animation:smallwing 2s infinite;
-o-animation:smallwing 2s infinite;
-moz-animation:smallwing 2s infinite;
-ms-animation:smallwing 2s infinite;
animation:smallwing 2s infinite;
}
#pearl:after
{ 
content:"";
width:10em;
height:10em;
background:radial-gradient(circle, white 35%, #F1765E 10%) 0px 0px no-repeat;
left: 2.5em;
top: 10em;
border-radius:100% 80% 100% 0% / 100% 80% 100% 0%;
position:absolute;
-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
box-shadow:0em 0em 0em 2.5em #fff,0em 0em 1em 2.5em #ccc,0em 0em 0em 2.6em #f2f2f2;
}

@-webkit-keyframes bigwing
{
0%{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
50%
{
box-shadow:-8em 2em 0em 0em #0095E5, 8em 2em 0em 0em #54C3FF;
}
100%
{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
}

@-webkit-keyframes smallwing
{
0%{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
50%
{
left: 13.1em;
box-shadow:-26.3em 0em 0em 0em #0074B2;
}
100%
{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
}

@-moz-keyframes bigwing
{
0%{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
50%
{
box-shadow:-8em 2em 0em 0em #0095E5, 8em 2em 0em 0em #54C3FF;
}
100%
{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
}

@-moz-keyframes smallwing
{
0%{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
50%
{
left: 13.1em;
box-shadow:-26.3em 0em 0em 0em #0074B2;
}
100%
{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
}

@-o-keyframes bigwing
{
0%{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
50%
{
box-shadow:-8em 2em 0em 0em #0095E5, 8em 2em 0em 0em #54C3FF;
}
100%
{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
}

@-o-keyframes smallwing
{
0%{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
50%
{
left: 13.1em;
box-shadow:-26.3em 0em 0em 0em #0074B2;
}
100%
{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
}

@-ms-keyframes bigwing
{
0%{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
50%
{
box-shadow:-8em 2em 0em 0em #0095E5, 8em 2em 0em 0em #54C3FF;
}
100%
{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
}

@-ms-keyframes smallwing
{
0%{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
50%
{
left: 13.1em;
box-shadow:-26.3em 0em 0em 0em #0074B2;
}
100%
{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
}

@keyframes bigwing
{
0%{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
50%
{
box-shadow:-8em 2em 0em 0em #0095E5, 8em 2em 0em 0em #54C3FF;
}
100%
{
box-shadow:0em 0em 0em 0em #0095E5, 0em 0em 0em 0em #54C3FF;
}
}

@keyframes smallwing
{
0%{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
50%
{
left: 13.1em;
box-shadow:-26.3em 0em 0em 0em #0074B2;
}
100%
{
left: 0.5em;
box-shadow:0em 0em 0em 0em #0074B2;
}
}