CODEWITHSUNDEEP
htmlcssbuttonshadow
Polla A. Fattah
Polla A. Fattah

Reputation: 829

Shadow with CSS Trapezoid Shape button

I have used this question to create buttons. But when I try to create a bottom left shadow to the button the white area will appear as:

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

Is there any workaround for this. Or even better. Is there any way to create a true Trapezoid button so that it will work with the shadow and there will be no problem with the background matching.

Upvotes: 1

Views: 1528

Answers (2)

Alexis Philip
Alexis Philip

Reputation: 536

In your example, you can't add a proper box-shadow without having these white parts on each side. That is because the CSS border colouring the grey shaped trapeziod DIV.

In the example above, they are using an .SVG file (image), since it is an image, the original shape of it is a trapezoid, not a rectangle with white side like yours.

You will need to draw an .svg in the shape and color you want, and then add a shadow to the element itself.

Here are more informations about SVG.

I hope it helps.

Upvotes: -1

Asons
Asons

Reputation: 87191

This is the best I could come up with, using the pseudo elements as the background.

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

A SVG image would most likely be the better choice though.

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

Upvotes: 3

Related Questions