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