html - 在带有渐变的CSS中创建一个箭头框

Question

我正在尝试在 css 中创建一个带有箭头的框，这是我目前的结果:http://dabblet.com/gist/4079318

如您所见，渐变没有正确应用于箭头，它为箭头使用了额外的标记。还有其他人有更好的解决方案吗？

Answer 1

使用具有对 Angular 渐变的旋转伪元素:

.fancy-arrow:after {
  content:"";
  display:block;
  width:25px;height:25px;
  background:#f00;
  position:absolute;
  right:-12px;top:5px;

  background: -webkit-linear-gradient(left top,  #7d7e7d 0%,#0e0e0e 100%); 
  -webkit-transform:rotate(45deg);
  z-index:-1;
}

仅用于演示目的，带有 webkit 前缀。在 IE 中使用一些过滤魔法也可以实现同样的效果。

working Demo