どのように（右から三角形で）境界勾配のrectagleを作るのですか？

Question

CSS3/SVGボタンに問題があります。私はそのような線形グラデーショングラデーションの境界線を作成する方法がわからない：

Button

トップボタン：ボタンは透明な背景を持っている

下ボタン：ホバー上のボタンが（国境のと同じ）グラデーション背景を持っていますあなたがホバリング時にそのような勾配の背景を行うことができない場合は、境界線の色のみを変更することができます

Answer 1

私は1つのデモを作成しました。色を変えなければならないのですが、望むように色がほとんど変わりません。

グラデーションを作成するには、this素晴らしいオンラインツールを使用できます。

.container{ 
 
    background:blue; 
 
    padding:100px; 
 
    float:left; 
 
} 
 
.outsider{ 
 
    padding:4px 0px 4px 4px; 
 
    float:left; 
 
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#8887d3+0,cbebff+43,ffffff+100 */ 
 
background: rgb(136,135,211); /* Old browsers */ 
 
background: -moz-linear-gradient(left, rgba(136,135,211,1) 0%, rgba(203,235,255,1) 43%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ 
 
background: -webkit-linear-gradient(left, rgba(136,135,211,1) 0%,rgba(203,235,255,1) 43%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ 
 
background: linear-gradient(to right, rgba(136,135,211,1) 0%,rgba(203,235,255,1) 43%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ 
 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8887d3', endColorstr='#ffffff',GradientType=1); /* IE6-9 */ 
 
position:relative; 
 
} 
 
.outsider:after{ 
 
     content: ""; 
 
    position: absolute; 
 
    right: -30px; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-top: 43px solid transparent; 
 
    border-bottom: 43px solid transparent; 
 
    border-left: 30px solid #FFFFFF; 
 
    top: 0px; 
 
} 
 
.outsider:before{ 
 
     content: ""; 
 
    position: absolute; 
 
    right: -26px; 
 
    width: 0px; 
 
    height: 0px; 
 
    border-top: 39px solid transparent; 
 
    border-bottom: 39px solid transparent; 
 
    border-left: 26px solid #0000FF; 
 
    top: 4px; 
 
    z-index: 1; 
 
} 
 
.insider{ 
 
    padding:30px; 
 
    float:left; 
 
    color:#FFFFFF; 
 
    background:blue; 
 
}

<div class="container"> 
 
    <div class="outsider"> 
 
    <div class="insider"> 
 
     Lorem ipsum dolor silit 
 
    </div> 
 
    </div> 
 
</div>