分裂中的走投无路的箭头

Question

我想创建类似于地图的箭头表示的内容，我将使用 RickMarker Google API 支持。但是我希望在CSS中实现类似下面的图像。

如果不可行，请解释原因和替代方法。

Answer 1

警告：这个答案只是为了说明实现这种形状是可能的（尽管采用复杂的方法）。请不要将CSS用于这种复杂的形状。你最好使用PNG文件。

＆＃13;

＆＃13;

div {
  height: 100px;
  width: 200px;
  line-height: 100px;
  text-align: center;
  border: 2px solid gray;
  background: -webkit-linear-gradient(45deg, white 90%, #444 91%, #98CC2D 91.5%, #777 94%, #98CC2D 94.5%);
  background: -moz-linear-gradient(45deg, white 90%, #444 91%, #98CC2D 91.5%, #777 94%, #98CC2D 94.5%);
  background: linear-gradient(45deg, white 90%, #444 91%, #98CC2D 91.5%, #777 94%, #98CC2D 94.5%);
  position: relative;
}
div:before {
  position: absolute;
  content: '';
  height: 25px;
  width: 25px;
  border-right: 2px solid gray;
  border-bottom: 2px solid gray;
  top: 87.5%;
  left: 40%;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  background: white;
}
div:after {
  position: absolute;
  content: '';
  height: 3px;
  width: 40px;
  top: 10px;
  left: 168px;
  background: white;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
}

＆＃13;

<div>Test bubble</div>

＆＃13;

＆＃13;

＆＃13;

浏览器兼容性 - 在Chrome v24，Firefox v19，Safari v5.1.7（在Windows上）进行了测试。

最终输出：

Answer 2

我认为你不能用css做到这一点。如果我错了，请纠正我。

我认为您最好的选择就是使用您在此处提供的图片，并使用gimp或photoshop删除您不需要的白色背景部分。然后，您应该使用.png扩展名保存文件。这将保留透明背景。

如果你能用css做到这一点，我很乐意听到它！