带有图像的CSS工具提示尾部

Question

CSS中的工具提示尾部是可能的，例如参见here。我希望做类似的CSS工具提示尾巴，但有一个背景图片。请参阅Twitter的卡工具提示（查看左上角）：

如何进行图像工具提示？

Answer 1

最简单的方法是使用SVG和clip-path（就像twitter一样）

Here's Fiddle Demo

它使用img元素，然后将其屏蔽。您可以使用online tool或免费的svg编辑器（如InkScape

）创建元素

＆＃13;

＆＃13;

.tooltip{
  width:380px;
  object-fit:cover;
  object-position:center;

  /*Chrome,Safari*/
  -webkit-clip-path: polygon(58px 25px,70px 9px,81px 25px,380px 25px,380px 215px,11px 215px,10px 25px);

  /*Firefox*/
  clip-path: url("#clipPolygon");

}


body{
  background:url('http://ericasadun.com/wp-content/uploads/2013/04/f.png');
}

＆＃13;

<svg width="0" height="0">
  <clipPath id="clipPolygon">
    <polygon points="56 25,70 9,81 25,380 25,380 215,11 215,10 25">
    </polygon>
  </clipPath>
</svg>


<img class="tooltip" src="http://lorempixel.com/image_output/animals-q-c-640-480-3.jpg" alt="">

＆＃13;

＆＃13;

＆＃13;

http://cssplant.com/clip-path-generator