jsFiddle

• Run again
• Edit this fiddle

• Result
• HTML
• CSS

<div id="gravatar"></div>

body { 
    background: #F2F2F2;
    width: 80%;
    padding: 0 10%;
    position: relative;
}

body::before {content: ""; position: fixed; background:#0075B5; top:0px; left: -5%; width: 110%; height: 50px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -ms-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -o-box-shadow: 0px 0px 10px rgba(0,0,0,.8); box-shadow: 0px 0px 10px rgba(0,0,0,.8);  z-index: 999;}

div#gravatar { 
    width: 100%;
    height: 500px;
    margin: 150px auto;
    background: #fff;
    border-top-left-radius:33px;
    border-top-right-radius:33px;
    position: relative;
    border:1px solid #ddd;
    border-top: 1px solid #eee;
    -webkit-box-shadow: 0px 4px 10px rgba(0,0,0,.08); 
    -moz-box-shadow: 0px 4px 10px rgba(0,0,0,.08); 
    -ms-box-shadow: 0px 4px 10px rgba(0,0,0,.08); 
    -o-box-shadow: 0px 4px 10px rgba(0,0,0,.08); 
    box-shadow: 0px 4px 10px rgba(0,0,0,.08); 
}

div#gravatar::before,
div#gravatar::after { 
    content:"";
    position: absolute;
    
    background: -moz-linear-gradient(top, rgba(244,244,244,1) 0%, rgba(244,244,244,1) 99.9%, rgba(255,255,255,0) 100%), 
        -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
    
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,244,244,1)), color-stop(99.9%,rgba(244,244,244,1)), color-stop(100%,rgba(255,255,255,0))), 
        -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0)));
    
    background: -webkit-linear-gradient(top, rgba(244,244,244,1) 0%,rgba(244,244,244,1) 99.9%,rgba(255,255,255,0) 100%), 
        -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
    
    background: -o-linear-gradient(top, rgba(244,244,244,1) 0%,rgba(244,244,244,1) 99.9%,rgba(255,255,255,0) 100%), 
        -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
    
    background: -ms-linear-gradient(top, rgba(244,244,244,1) 0%,rgba(244,244,244,1) 99.9%,rgba(255,255,255,0) 100%), 
        -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
    
    background: linear-gradient(top, rgba(244,244,244,1) 0%,rgba(244,244,244,1) 99.9%,rgba(255,255,255,0) 100%) ,  
        linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);
    
    
    
    height: 1px;
    width: 70px;
    top: 10px;
}

div#gravatar::before {
    
    left: -25px;  
    -webkit-transform: rotate(-45deg);
}
div#gravatar::after {
    right: -25px;  
    -webkit-transform: rotate(45deg);
}