Javascript 有没有一种简单的方法可以使用JQuery将齿添加到div中？

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

它给它一个向外的牙齿

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

一种“简单”的方法是在

中添加一块绝对定位的图形：

然后，您只需确保：

将此图像作为背景图像（无重复，顶部，左侧）

背景图像始终大于

（两个方向），并且

有一个额外的顶部填充（等于箭头的“大小”）

---

不确定这是否是你想要的。。。有一种纯粹的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'});
    });
  }

$.fn.addTooth=功能（偏移）{
返回$（this）.each（函数（）{
$（''）.addClass（'tooth'）.css({
宽度：0，高度：0，
borderColor:“透明黑色透明”，
边框样式：“实心”，
边框宽度：“10px”，
位置：'绝对'，
前-20名，
左：偏移量
}).附于（本）；
$（this.css（{position:'relative'}）；
});
}

CSS将需要大量的调整

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

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

$.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'});
    });
  }