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

<强> working Demo

Answer 2

这是另一个不需要CSS3的解决方案，但是它仅适用于单色框：http://jsfiddle.net/T4A2Q/

<!DOCTYPE html>
<html>
<head>
<style type="text/css">

#Box {
 width: 300px;
 height: 40px;
 background: #0094FF;
 border-color: #0094FF;
}

#Box:after {
 content: '';
 clear: both;
 float: right;
 margin-right: -20px;
 border-width: 10px;
 border-style: solid;
 border-bottom-color: transparent;
 border-left-color: inherit;
 border-top-color: inherit;
 border-right-color: transparent;
}

#Box:before {
 content: '';
 clear: both;
 float: right;
 margin-right: -20px;
 border-width: 10px;
 border-style: solid;
 border-bottom-color: inherit;
 border-left-color: inherit;
 border-top-color: transparent;
 border-right-color: transparent;
}

body {
 background: #FFF;
}

</style>
</head>

<body>

<div id="Box">

</div>

</body>
</html>

Answer 3

文字渐变尚未得到很好的支持。

您可能需要使用的是使用现有的矩形，然后在角上放置几个白色面具以形成箭头。

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

3 个答案: