html - 带有 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>