CSS 삼각형의 그라디언트

Question

모든 것을 시도했지만 기본적으로 오른쪽에 삼각형이있는이 사각형을 사용하려고합니다. 나는 그것에 그림자를 얻으려고 노력하고 또한 이것에 그라디언트를 가지고있다. 누구든지 사각형 오른쪽에 맞게 그라데이션을 올바르게 표시하는 방법을 알고 있습니까? 나는 삼각형을 만들기 위해 경계를 사용하고 있는데, 나는 이것이 가장 공통적 인 패턴 중 하나라고 느낀다.

모든 의견을 환영합니다. 오른쪽에 데모 예제를 만들었습니다.

http://sassmeister.com/gist/f49dd8f6ef8d3e121557

Answer 1

데모 :http://jsfiddle.net/techsin/g2x99/

업데이트 (수직) :http://jsfiddle.net/techsin/g2x99/4/

http://jsfiddle.net/techsin/g2x99/2/

이미지 here..or SVG를 사용하는 것이 훨씬 더 쉬웠을 것 또는 여기에 캔버스.

또 다른 단점은 모서리의 배경이 투명하지 않다는 것입니다.

body {background-color: #eee;} 
.box { 
    width: 100px; 
    height: 40px; 
    background-color: rgb(115, 115, 202); 
    position: relative; 
    background-image: -webkit-gradient(
    linear, 
    left top, 
    right top, 
    color-stop(0, rgba(255, 255, 255,.2)), 
    color-stop(1, rgba(0, 0, 0,.6)) 
); 
} 

.box:before, 
.box:after { 
    font-size: 0px; 
    content: "."; 
    position: absolute; 
    right: 0;  

} 
.box:before { 
    border-top: 20px solid transparent; 
    border-right: 15px solid #eee; 
    bottom: 0; 
} 
.box:after { 
    border-top: 20px solid #eee; 
    border-left: 15px solid transparent; 
    top: 0; 
}