1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <style>
6 div { width:100px; height:100px; -webkit-transform:rotate(90deg);}
7 div:before {content:""; display:block; width:100px;height:50px; margin-top:10px; padding:10px; padding-bottom:0; box-sizing:border-box;
8 border-top-left-radius:50px;
9 border-top-right-radius:50px;
10 background:-webkit-gradient(
11 linear,
12 left top,
13 right top,
14 color-stop(0,#fff),
15 color-stop(1,#fff)
16 ),-webkit-gradient(
17 linear,
18 left top,
19 right top,
20 color-stop(0,#077df8),
21 color-stop(1,#74baff)
22 );
23 background-clip:content-box,padding-box;
24 }
25 div:after {content:""; display:block; width:100px;height:50px; padding:10px; padding-top:0; box-sizing:border-box;
26 border-bottom-left-radius:50px;
27 border-bottom-right-radius:50px;
28 background:-webkit-gradient(
29 linear,
30 left top,
31 right top,
32 color-stop(0,#fff),
33 color-stop(1,#fff)
34 ),-webkit-gradient(
35 linear,
36 left top,
37 right top,
38 color-stop(0,#fff),
39 color-stop(1,#74baff)
40 );
41 background-clip:content-box,padding-box;
42 }
43 </style>
44 </head>
45 <body>
46 <div></div>
47 </body>
48 </html>
