<body>
<style type="text/css">
span{height:40px width:40px display:block position:relative}
.demoSpan1{width:26px}
.demoSpan1:before{content:'' height:16px width:16px border:5px solid #333 display:block position:absolute top:2px left:0px z-index:1 line-height:26px border-radius:40px-webkit-border-radius:40px-moz-border-radius:40px color:#fff text-align:center}
.demoSpan1:after{content:'' height:0px width:0px display:block position:absolute bottom:2px left:3px border:10px transparent solid border-top-color:#333 border-width:15px 10px 0px 10px }
</style>
<span class="demoSpan1">
</span>
</body>
</html>
这个是中间空心的，你自己略加修改。
给你个便捷的CSS3图标网站，那里有很多责成的。
这里不给发网址，下面的东东，自己参吧：
www-uiplayground-in/css3-icons
完全可以，不过效果和ps出来的还是会有差距的。<style>
.gaguang{width:300pxtext-align:center}
.box{width: 300px
height: 100px
background: #3B4C2C
border: 4px solid white
box-shadow: 0 0 10px #333
border-radius: 10px
opacity: 0.8}
.gg{width: 400px
height: 200px
border-radius: 45%
margin-top: -265px
z-index: 1
background: white
opacity: 0.1
margin-left: -45px}
.wz{z-index:0position:absolutetop:40pxcolor:#fffwidth:300px}
</style>
<div class="gaguang">
<div class="box"></div>
<div class="wz">这里是内容,这里是内容,</div>
<div class="gg"></div>
</div>
