陰影與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>