Question

我正在尝试将相同的渐变放在锚点上的：after伪选择器之后。

<a class="atlas-tabs" href="">Gradient</a>

.atlas-tabs{ 
   background: #c53a73; /* Old browsers */
   background: -moz-linear-gradient(top, #c53a73 0px,#af3b6b 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0px,#c53a73),    color-stop(100%,#af3b6b));
   background: -webkit-linear-gradient(top, #c53a73 0px,#af3b6b 100%);
   background: -o-linear-gradient(top, #c53a73 0px,#af3b6b 100%);
   background: -ms-linear-gradient(top, #c53a73 0px,#af3b6b 100%);
   background: linear-gradient(top, #c53a73 0px,#af3b6b 100%);
   color: #FFF;
   display: block;
   padding: .9em 0em .9em 1em;
   position: relative;
   text-decoration: none;
   width: 11.33em; 
}
.atlas-tabs:after{
   content:""; 
   width: 0px;
   height: 0px; 
   position: absolute; 
   right: -.3em; 
   top: 0;
   border-top: 25px solid transparent;
   border-right: 0 solid transparent;
   border-bottom: 25px solid transparent;
   border-left: 5px solid #b33b6d;
}

这是小提琴http://jsfiddle.net/8nzeK/

Answer 1

使用边框技巧的CSS三角形，您无法对其应用渐变。所以你必须找到另一种方法来创建三角形。其中一种可能的方法是使用skew变换来创建三角形。然后，您可以正确地将相同的背景linear-gradient应用于:after元素。以下是代码详细信息：

.atlas-tabs:after{
  content:""; 
  width: 1.3em;
  height: 1.3em; 
  position: absolute;
  -webkit-transform: translate(-50%, -50%) rotate3d(0,0,1,45deg) skew(30deg,30deg);
  top: 50%;
  left: 100%;
  background:linear-gradient(to bottom right, #c53a73 0px,blue 100%); 
  z-index:-2;
}

注意：

我改变颜色停止了一点点使它变得清晰，因为颜色停止你使用的看起来太相似（对我来说几乎是坚实的背景）。

我只使用-webkit-前缀，因此请在Chrome或Opera上测试该演示。您可以编辑演示以在其他浏览器上运行OK。

此解决方案需要反复试验，因此要查找width元素的height和:after的值，您可能需要减少/增加并尝试使用它。当然如果你擅长数学，我相信你可以计算出这些数值。

Demo.

Answer 2

您也可以使用渐变来绘制箭头： DEMO

.atlas-tabs:after {
    content:"";
    width:3em;/* tune this */
    height: 100%;
    position: absolute;
    right:0;
    top: 0;
    background:/* tune degrees to your needs */
        linear-gradient(-80deg, white 50%, transparent 50%), 
        linear-gradient( 80deg, transparent 50%, white 50%)
}

一个更明显的代码示例，用不同的颜色重新调整：http://jsfiddle.net/8nzeK/2/

渐变边框 - 在伪选择器上留下：后

2 个答案:

Demo.