具有内部阴影和渐变边框的CSS渐变箭头形状 [英] CSS Gradient arrow shape with inner shadow and gradient border

问题描述

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

I want to create a gradient arrow shape button with gradient border and 1px inner shadow from CSS.

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

I've created an image to show the button and the style rules:

这是我到目前为止所拥有的：

This is what I have so far:

.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 。

Cross-browser support is a main thing so it's also ok if everything can be done from CSS expect the gradient border. In this case the border will have one simple color — #ab1465.

主要问题始于渐变。我可以借助css伪元素来制作箭头形状，但是我需要一个跨浏览器解决方案以使整个箭头形状具有一个连续的渐变。

The main problem starts with the gradient. I can make an arrow shape with the help of css pseudo elements, but I need a cross browser solution to have one continuous gradient for the whole arrow shape.

推荐答案

渐变箭头按钮

让我们发挥创意吧！

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

Gradient Arrow Button

Let's get creative!

This button has been created entirely with CSS — skew, border and gradient with pseudo elements. It looks like this:

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

It looks nice zoomed in and doesn't break:

这是创建它的形状：

形状会被溢出所切除：隐藏

• 使用创建倾斜的形状和渐变：before 。

内部阴影是通过：after 使用简单边框

The inner shadow is created with the :after using a simple border

为渐变指定了一个角度，以匹配伪元素旋转的方向

The gradient is given an angle to match the direction of the pseudo elements rotation

请注意使用转换：translateZ（0）。这样可以防止旋转的伪元素出现锯齿状。目前，伪元素位于 z-index：-1 的文本下方。

Note the use of transform: translateZ(0). This prevents a jagged appearance of the rotated pseudo element. Currently the pseudo element is placed underneath the text with z-index: -1.

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

You will need to tinker with the fine details, but it should speak for itself. In order to take more text, the pseudo element with the gradient would need to be larger.

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

这篇关于具有内部阴影和渐变边框的CSS渐变箭头形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！