Idea from Eric F Tremblay (http://cssdeck.com/user/ericft) Cleaned up HTML usage (6 divs for shadow). The pin was designed by Dan Eden (https://twitter.com/#!/_dte).

index.html

<h1>Unfold Map pure CSS</h1>

<div class="holder">
  <div class="map fold">
    <span class="pin" style="left: 140px; top: 75px;" alt="Montreal"></span>
    <span class="pin" style="left: 373px; top: 103px;" alt="Hong-Kong"></span>
  	<span class="pin" style="left: 79px; top: 95px;" alt="Las Vegas"></span>
  </div>
</div>


<p>Original on CSSDeck: <a href="http://cssdeck.com/labs/css3-unfold-map-with-pins">http://cssdeck.com/labs/css3-unfold-map-with-pins</a>

script.js

/* 

Idea from Eric F Tremblay (http://cssdeck.com/user/ericft)

Cleaned up HTML usage (6 divs for shadow). 

The pin was designed by Dan Eden (https://twitter.com/#!/_dte).

*/

style.css

body{
  font-family:helvetica, sans-serif;
  background: #eee;
}

h1, p{
  text-align:center;
}

.holder {
    position:relative;
    display: inline-block;
    padding: 6px;
    background: #fff;
    box-shadow: 0 1px 2px 2px rgba(0,0,0,0.2);
    border-radius: 4px;
    left: 50%;
  	margin-left:-245px;
}

.holder:after, .holder:before{
	position:absolute;
  content:'';
  bottom:0;
  width:250px;
  height:100px;
  border-radius: 45%;
  box-shadow: inset 0 1px 1px hsla(0,0%,100%,.1),
    0 4px 3px hsla(0,0%,0%,.1),
    0 6px 6px hsla(0,0%,0%,.1),
    0 10px 6px hsla(0,0%,0%,.1);
  z-index:-1;
}
.holder:before{
	left:75%;
  margin-left:-125px;
}

.map{
	background:url(https://dl.dropbox.com/u/5319/codepen/worldmap.jpeg);
  width: 491px;
  height: 260px;
  z-index:0;
}


.fold {
  position:relative;
}

.fold:before{
  position:absolute;
  content:'';
	background: linear-gradient(-45deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 50%);
  
  background-size:50% 50%;
  
  width:100%;
  height:100%;
}

/*The pin was designed by Dan Eden (https://twitter.com/#!/_dte).*/

.pin {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #f33;
    background-image: -webkit-linear-gradient(top, rgba(100,0,0,0), rgba(255,90,90,1));
    background-image: -moz-linear-gradient(top, rgba(100,0,0,0), rgba(255,90,90,1));
    background-image: -ms-linear-gradient(top, rgba(100,0,0,0), rgba(255,90,90,1));
    background-image: -o-linear-gradient(top, rgba(100,0,0,0), rgba(255,90,90,1));
    background-image: linear-gradient(to bottom, rgba(100,0,0,0), rgba(255,90,90,1));
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    box-shadow: 0 0 0 1px #c00, inset 0 1px 1px rgba(255,255,255,.6), 0 2px 2px rgba(0,0,0,.4);
    position: absolute;
}

.pin:after {
    height: 10px;
    width: 2px;
    content:'';
    background: #aaa;
    display: block;
    position: absolute;
    z-index: -1;
    left: 3px;
    top: 100%;
    box-shadow: inset 0 1px 1px hsla(0,0%,100%,.1),
                0 0 1px 1px hsla(0,0%,0%,.2),
                0 2px 3px hsla(0,0%,0%,.3),
                0 4px 3px hsla(0,0%,0%,.3),
                0 6px 6px hsla(0,0%,0%,.1),
                2px 10px 6px hsla(0,0%,0%,.7);
    
}

.pin:hover:after {
    background: rgba(0,0,0,.7);

    -webkit-box-shadow: inset 0px -10px 10px rgba(0,0,0,.7), 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);
    -moz-box-shadow: inset 0px -10px 10px rgba(0,0,0,.7), 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);
    box-shadow: inset 0px -10px 10px rgba(0,0,0,.7), 0px 0px 0px 1px rgba(0,0,0,1), inset 0px 1px 0px 0px rgba(255,255,255,.3);

    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #fff;
    content: attr(alt);
    font-size: 11px;
    font-family: "Helvetica Neue", Helvetica, Sans;
    position: absolute;
    text-align: center;
    display: block;
    padding: 6px 0px 10px 0;
    width: 68px;
    text-shadow: 0 -1px 0 #000;
    white-space: nowrap;
    z-index: 98;
    left: -30px;
    top: 15px;    
}