Question

我使用this问题来创建按钮。但是，当我尝试为按钮创建左下角阴影时，白色区域将显示为：

＆＃13;

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

＆＃13;

<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>

＆＃13;

是否有任何解决方法。甚至更好。有没有办法创建一个真正的梯形按钮，以便它可以与阴影一起使用，背景匹配将没有问题。

Answer 1

这是我能想到的最好的，使用伪元素作为背景。

＆＃13;

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

＆＃13;

<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>

＆＃13;

SVG图像很可能是更好的选择。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

在您的示例中，您不能添加适当的盒形阴影，而不必在每一侧都具有这些白色部分。这是因为 CSS边框为灰色的梯形DIV着色。

在上面的示例中，他们使用的是 .SVG文件（图像），因为它是图像，所以它的原始形状是梯形，而不是像您一样带有白色边的矩形。

您需要以所需的形状和颜色绘制.svg，然后在元素本身上添加阴影。

Here are more informations about SVG。

希望对您有帮助。

带有CSS Trapezoid Shape按钮的阴影

2 个答案: