效果图:
代码:
<style>
#trapezoid {width:100px;height:25px;padding:.5em 1em .35em;position:relative;color:#fff;margin-left:100px;transform-origin:bottom right;text-align:center;line-height:25px;display: block;}
#trapezoid::before {content:"";position:absolute;top:0;left:0;right:0;transform-origin:bottom right;bottom:0;z-index:-1;background:#58a;transform:perspective(.7em) rotateX(3deg);border-top-left-radius:5px;border-top-right-radius:5px;}
</style>
<a id="trapezoid">sd</a>
效果图:
代码:
<style>
#trapezoid {width:100px;height:25px;padding:.5em 1em .35em;position:relative;color:#fff;margin-left:100px;transform-origin:bottom right;text-align:center;line-height:25px;display: block;}
#trapezoid::before {content:"";position:absolute;top:0;left:0;right:0;transform-origin:bottom right;bottom:0;z-index:-1;background:#595959;transform:perspective(.7em) rotateX(3deg);border-top-left-radius:5px;border-top-right-radius:5px;box-shadow: -3px 0px 0px #e6e6e6;}
</style>
<a id="trapezoid">sd</a>