具有内部阴影和渐变边框的 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

渐变箭头按钮

\n

让我们发挥创意吧！

\n

该按钮完全使用 CSS \xe2\x80\x94 倾斜、边框和渐变以及伪元素创建。它看起来像这样：

\n

\n

放大后看起来不错并且不会破裂：

\n

\n

这是创建它的形状：

\n

\n

overflow: hidden形状在母体上被切断。

\n

CSS

\n

\n

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

  \n
\n

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

  \n
\n

• 给定梯度一个角度以匹配伪元素旋转的方向

  \n
\n

\n

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

\n

完整示例

\n

您将需要修补细节，但它应该不言而喻。为了获取更多文本，具有渐变的伪元素需要更大。

\n

\r\n

\r\n

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

\r\n

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

\r\n

\r\n

\r\n

\n