CSS渐变箭头形状，内部阴影和渐变边框

Question

我想创建一个渐变边框和CSS内部阴影的渐变箭头形状按钮。

我创建了一个图片来显示按钮和样式规则：

这是我到目前为止所做的：

＆＃13;

＆＃13;

.button {
        color: #FFF;
        background-color: #D02180 !important;
        background: -webkit-gradient(linear, 0 0, 0 100%, from(#f84aa4), to(#d02181));
        background: -webkit-linear-gradient(#f84aa4, #d02181);
        background: -moz-linear-gradient(#f84aa4, #d02181);
        background: -o-linear-gradient(#f84aa4, #d02181);
        background: linear-gradient(#f84aa4, #d02181);
        padding: 5px 10px;
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        border: 1px solid #ab1465;
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset;
    }

＆＃13;

<a class="button">Next</a>

＆＃13;

＆＃13;

＆＃13;

跨浏览器支持是一个主要的事情，所以如果可以通过CSS完成所有事情，期望渐变边界也可以。在这种情况下，边框将有一个简单的颜色 - #ab1465。

主要问题始于渐变。我可以在css伪元素的帮助下制作箭头形状，但我需要一个跨浏览器解决方案，为整个箭头形状提供一个连续渐变。

Answer 1

渐变箭头按钮

让我们变得有创意！

此按钮完全使用CSS创建 - 偏斜，边框和带有伪元素的渐变。它看起来像这样：

看起来很好放大并且不会破坏：

这是创建它的形状：

在父级上使用overflow: hidden剪切形状。

CSS

• 使用:before创建带角度的形状和渐变。

• 使用简单边框:after创建内部阴影

• 渐变的角度与伪元素旋转的方向相匹配

请注意transform: translateZ(0)的使用。这可以防止旋转的伪元素出现锯齿状外观。目前，伪元素位于文本下方z-index: -1。

完整示例

你需要修补细节，但它应该说明一切。为了获取更多文本，带有渐变的伪元素需要更大。

＆＃13;

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Exo+2:300);
 a {
  color: #000;
  text-decoration: none;
  position: relative;
  color: #FFF;
  display: inline-block;
  padding: 10px 40px 10px 10px;
  border-radius: 5px;
  overflow: hidden;
  transform: translateZ(0);
  font-family: 'Exo 2', sans-serif;
}
img {
  position: relative;
  z-index: -1;
}
a:before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  margin-top: -2.4em;
  left: -20%;
  width: 100%;
  height: 200%;
  background: #D02180 linear-gradient(130deg, rgba(248, 74, 165, 1) 30%, rgba(248, 74, 165, 1) 80%);
  transform: rotate(55deg) skewX(20deg) translateZ(0);
  z-index: -1;
}
a:after {
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  width: 70%;
  height: 100%;
  transform: translateZ(0);
  z-index: -1;
  border-top: solid 1px #FFF;
  border-radius: 5px 0;
  opacity: 0.4;
}

＆＃13;

<a href="#">Next</a>

＆＃13;

＆＃13;

＆＃13;