* { margin:0; padding:0; } ul,li { list-style:none; } body { background:radial-gradient(#eeefef,#d6d7d9); padding:50px; } .box { width:540px; height:200px; margin:50px auto; } .box ul li { width:150px; height:160px; border:1px solid #9fa2ad; display:inline-block; margin-right:10px; text-align:center; border-radius:5px; box-shadow:inset 0 -2px 0 #f1f1f1,0 1px 0 #f1f1f1,0 2px 0 #9fa2ad,0 3px 0 #f1f1f1,0 4px 0 #9fa2ad; background:-webkit-linear-gradient(top,rgba(248,248,248,.3) 20%,rgba(168,173,190,.5) 50%,rgba(168,173,190,.3) 51%,rgba(248,248,248,.2) 90%); position:relative; } .box li span:first-child { font-size:120px; color:#52555a; display:block; height:130px; line-height:150px; } .box li:before,.box li:after { display:block; content:""; position:absolute; width:150px; } .box li:before { top:50%; height:1px; box-shadow:0 1px 0 #868995,0 2px 1px #fff; } .box li:after { bottom:-65px; height:60px; border-radius:0 0 5px 5px; background:-webkit-gradient(linear,0 0,0 100%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,0))); background:-webkit-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0)); background:linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0)); z-index:1; }