因为是移动端所以图片是用img元素，并且宽度不能写死是百分比，这样的话如果用两个pabsolute或者伪元素就会造成另一个p错位，有什么好方法可以实现吗？
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
3
638
收藏
大致Codepen里面模拟了一个，颜色参数可能不太对，左上角的高亮可以用图片替代。
http://codepen.io/cheerxl/pen/mePxPG
最好不要使用图片，这种按钮通过css3可以实现。移动端的话可以放心使用。
采用伪元素不方便控制变化的宽度，所以采取外层元素相对定位，内存元素绝对定位的方式来处理。
样式(没有处理阴影之类的):
<style type="text/css">
.download{border:2px solid #D73E3E;background:#8F2D2E;padding:10px 40px;text-align:center;color:#FFF;position:relative;border-radius:20px;overflow: hidden;}
.download em{position:relative;z-index:1;}
.download i{height:100%;display:inline-block;position:absolute;top:0;left:0;background:#FA8F53;}
</style>
html片段：
<a class="btn download"><em>loading</em><i style="width:30%;"></i></a>
<a class="btn download"><em>loading</em><i style="width:50%;"></i></a>
<a class="btn download"><em>loading</em><i style="width:80%;"></i></a>
<a class="btn download"><em>loading</em><i style="width:100%;"></i></a>
放到背景去就好了。