如何制作rectagle（右边三角形）边框渐变？

Question

我的CSS3 / SVG按钮有问题。我不知道如何制作线性渐变渐变边框：

Button

顶部按钮：按钮具有透明背景

底部按钮：悬停按钮具有渐变背景（与边框相同），不透明度为30％，如果在悬停时无法进行此类渐变背景，则只能更改边框颜色

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