그림자가있는 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>

: I 버튼에 왼쪽 아래 그림자를 만들려고 할 때하지만 흰색 영역이 나타납니다. 또는 더 나은. 거기에 진정한 사다리꼴 버튼을 만들 수있는 방법은 그림자와 함께 작동하므로 거기에 아무런 문제가 배경과 일치합니다.

Answer 1

이것은 의사 요소를 배경으로 사용하여 만들 수있는 최선의 방법입니다.

---

SVG 이미지

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

가능성이 높습니다 비록 더 나은 선택이 될 것입니다.

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