使用渐变在css中创建箭头框

Question

我正在尝试在css中创建一个带箭头的框,这是我迄今为止的结果:http://dabblet.com/gist/4079318

如您所见,渐变未正确应用于箭头,并且它使用了箭头的其他标记.还有其他人有更好的解决方案吗？

Answer 1

使用带有对角线渐变的旋转伪元素:

.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中也可以实现相同的效果.

工作演示