我正在尝试在 css 中创建一个带有箭头的框,这是我目前的结果:http://dabblet.com/gist/4079318
如您所见,渐变没有正确应用于箭头,它为箭头使用了额外的标记。还有其他人有更好的解决方案吗?
最佳答案
使用具有对 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 中使用一些过滤魔法也可以实现同样的效果。
关于html - 在带有渐变的CSS中创建一个箭头框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13401185/