1

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

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

4

3 回答 3

5

使用具有对角渐变的旋转伪元素：

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

工作演示

于 2012-11-15T16:04:08.397 回答
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>
于 2012-11-15T16:19:19.620 回答
0

文本渐变还没有得到很好的支持。

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

于 2012-11-15T15:58:41.080 回答