阴影与CSS梯形形状按钮

Question

我已经使用this问题来创建按钮。但是，当我尝试创建一个左下方阴影按钮会出现在白色区域为：

.btn { 
 
    height: 40px; 
 
    background: red; 
 
    width: 128px; 
 
    margin: 15px 5px 15px 5px; 
 
    cursor: hand; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    line-height: 40px; 
 
    -webkit-box-shadow: 2px 3px 3px #666666; 
 
    -moz-box-shadow: 2px 3px 3px #666666; 
 
    box-shadow: 2px 3px 3px #666666; 
 
} 
 

 
.btn:before { 
 
    width: 0px; 
 
    height: 20px; 
 
    border-left: 20px solid red; 
 
    border-top: 20px solid white; 
 
    float:right; 
 
    content:""; 
 
} 
 

 
.btn:hover{ 
 
    -webkit-box-shadow: 1px 1px 1px #666666; 
 
    -moz-box-shadow: 1px 1px 1px #666666; 
 
    box-shadow: 1px 1px 1px #666666; 
 
} 
 
.userNave{ 
 
    width: 140px; 
 
}

<nav class="userNave"> 
 
    <div class="btn" 
 
     onClick="alert('Hi')" 
 
     style="">Click Me Me</div> 
 

 
    
 
    <div class="btn" 
 
     onClick="alert('Hello')" 
 
     style="">No Click Me </div> 
 
    
 
</nav>

有没有办法解决这个。甚至更好。有没有什么办法可以创建一个真正的梯形按钮，这样它就可以和阴影一起工作，并且背景匹配也没有问题。

Answer 1

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

.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; 
 
}

<nav class="userNave"> 
 
    <div class="btn" onClick="alert('Hi')" style="">Click Me Me</div> 
 
    <div class="btn" onClick="alert('Hello')" style="">No Click Me</div> 
 
</nav>

---

一个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; 
 
}

<nav class="userNave"> 
 
    <div class="btn" onClick="alert('Hi')" style="">Click Me Me</div> 
 
    <div class="btn" onClick="alert('Hello')" style="">No Click Me</div> 
 
</nav>