带有内部阴影和渐变边框的 CSS 渐变箭头形状

Question

我想从 CSS 中创建一个带有渐变边框和 1px 内阴影的渐变箭头形状按钮。

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

这是我目前所拥有的：

.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;
    }

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

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

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

Answer 1

渐变箭头按钮

让我们发挥创意！

这个按钮完全是用 CSS 创建的——带有伪元素的倾斜、边框和渐变。它看起来像这样：

放大后看起来不错，不会损坏：

这是创建它的形状：

形状被父级上的overflow: hidden截断。

CSS

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

• 内部阴影是通过:after 使用简单边框创建的

• 梯度被赋予一个角度以匹配伪元素旋转的方向

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

完整示例

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

@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;
}

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