css - 如何制作矩形(右边有三 Angular 形)边框渐变？

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>