有没有一种简单的方法使用 JQuery 向 div 添加牙齿？

Question

基本的 div 是一个矩形。但有些网站（如 Facebook）顶部有一个小“牙齿”，指向图片或其他东西。

它给了它一颗向外的牙齿。

在 JQuery 中是否有一种简单的方法可以做到这一点？

Answer 1

一种“简单”的方法是将绝对定位的图形添加到

中：（

$('div.someclass').each(function() {
    var $tooth = $('<img />', {
                src: ...,
            }).css({
                top: '-8px',
                position: 'absolute'
            });
    $(this).css('position', 'relative').append($tooth);
});

未经测试）

如果您的

有边框，则您可以可以让图形重叠并将边框“延伸”到箭头的尖端。

---

或者，我已经看到仅使用顶部带有“牙齿”的背景图像（下面丑陋的 ASCII 草图）即可实现此目的：

+-^----------+
|            |
|            |
+------------+

然后您只需要确保：

1. 有将此图像作为背景图像（无重复、顶部、左侧），
2. 背景图像始终大于
   （两个方向），并且
3. 有一个额外的顶部填充（等于箭头的“大小”）。

Answer 2

不确定这是否是您正在寻找的...有一种纯 CSS 方法可以做到这一点，我经常这样做。除其他地方外，此处对此进行了描述。

要使牙齿朝上，请为牙齿添加一个 div：然后使用 0 像素矩形上的粗底部边框对其进行样式设置...

.tooth {
  width: 0; height: 0;
  border-color: transparent transparent black transparent;
  border-style: solid;
  border-width: 20px;
}

您需要将其绝对定位并调整位置它出现了。

jQuery 插件可能看起来像这样：

$.fn.addTooth = function(offset) {
    return $(this).each(function() {
      $('<div>').addClass('tooth').css({
         width: 0, height: 0,
         borderColor: 'transparent transparent black transparent',
         borderStyle: 'solid',
         borderWidth: '10px',
         position: 'absolute',
         top: -20,
         left: offset
      }).appendTo(this);
      $(this).css({position: 'relative'});
    });
  }

CSS 需要大量调整。

创建一个空心三角形有点困难，因为您需要两个矩形相互遮盖。我已经完成了这个（实际上还完成了更复杂的事情），但说实话，创建图形，然后添加它并以类似的方式定位它可能更容易。