css - 伪选择器上的渐变边界左:之后

我正在尝试在锚点上的：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/

最佳答案

使用带有边框技巧的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.

关于css - 伪选择器上的渐变边界左:之后，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23369747/