android 梯形button,阴影与CSS梯形形状按钮

这是最好的我可以拿出来，用伪元素作为背景。

.btn {

position: relative;

height: 40px;

width: 128px;

margin: 15px 5px 15px 5px;

padding: 0 10px 5px 0;

cursor: hand;

text-align: center;

vertical-align: middle;

line-height: 40px;

overflow: hidden;

}

.btn:before {

position: absolute;

left: -23px; top: 0;

width: calc(100% - 5px);

height: 50%;

background: red;

content: "";

z-index: -1;

transform: skewX(45deg);

transform-origin: left top;

box-shadow: 0px 1px 3px 1px #666666;

}

.btn:after {

position: absolute;

left: 0; top: 50%;

width: calc(100% - 5px);

height: calc(50% - 5px);

background: red;

content: "";

z-index: -1;

box-shadow: 2px 2px 4px #666666;

}

.userNave {

width: 140px;

}

Click Me Me

No Click Me

一个SVG图像将最有可能是更好的选择，虽然。

.btn {

position: relative;

height: 40px;

width: 128px;

margin: 15px 5px 15px 5px;

padding: 0 0 5px 0;

cursor: hand;

text-align: center;

vertical-align: middle;

line-height: 40px;

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='trapezoid' viewbox='0 0 118 45' preserveAspectRatio='none'%3E %3Cfilter id='dropshadow' height='130%25'%3E %3CfeGaussianBlur in='SourceAlpha' stdDeviation='3'/%3E %3C!-- stdDeviation is how much to blur --%3E %3CfeOffset dx='2' dy='2' result='offsetblur'/%3E %3C!-- how much to offset --%3E %3CfeMerge%3E %3CfeMergeNode/%3E %3C!-- this contains the offset blurred image --%3E %3CfeMergeNode in='SourceGraphic'/%3E %3C!-- this contains the element that the filter is applied to --%3E %3C/feMerge%3E %3C/filter%3E %3Cpath d='M0,0 L100,0 L120,20 L120,40 L0,40z' fill='red' style='filter:url(%23dropshadow)'%3E%3C/path%3E %3C/svg%3E");

}

.userNave {

width: 140px;

}

Click Me Me

No Click Me