梯度对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; 
}