用CSS3写的模仿iPhone中的返回按钮

CSS Code复制内容到剪贴板

/*这里用了一个伪类:before*/  
.btn-back:before {   
    margin: 50px;   
    content: ”;   
    display: inline-block;   
    width: 18px;   
    height: 18px;   
    background: -webkit-linear-gradient(-45deg, #6eb7c9, #449fb6);/*背景旋转-45°*/  
    background: -moz-linear-gradient(-45deg, #6eb7c9, #449fb6);   
    border: 1px solid #2c96b2;   
    -webkit-transform-origin: 0 0;/*设置基点为0,0*/  
    -moz-transform-origin: 0 0;   
    -webkit-transform: scaleX(0.8) rotate(45deg);/*X轴压缩，旋转45；后面的属性将被先这执行°*/  
    -moz-transform: scaleX(0.8) rotate(45deg);   
}  

4、感觉差不多了，合并；然后修饰下

这里修饰也有几步
1) 将左边的三角型进行绝对定位
2) 去掉按钮的左边框调整左边的两个圆角；并且设置为相对定位，z-index设置为2，这样可以盖住小三角的右半部分
3) 给左边的小三角加上圆角（因为圆角会减少高度，所以可能需要微调高度）

CSS Code复制内容到剪贴板

.btn-back {   
    font: 14px/27px Arial,Helvetica,sans-serif;   
    color: #fff;   
    text-decoration: none;   
  
    position: relative;   
    display: block;   
    margin-top: 11px;   
}   
/*按钮主体*/  
.btn-back span {   
    display: inline-block;   
    font-size: 13px;   
    line-height: 27px;   
    height: 27px;   
    padding: 0 10px 0 5px;   
    background: -moz-linear-gradient(top, #5bbfd8, #449fb6);   
    background: -webkit-linear-gradient(top, #5bbfd8, #449fb6);   
    border: 1px solid #2c96b2;