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

【问题标题】：Is there an easy way to add tooths to divs using JQuery?有没有一种简单的方法可以使用 JQuery 向 div 添加牙齿？
【发布时间】：2011-01-18 10:58:31
【问题描述】：

基本的 div 是一个矩形。但有些网站（如 Facebook）的顶部有小“牙齿”，指着图片什么的。

它长出了一颗向外的牙齿。

在 JQuery 中是否有一种简单易行的方法来做到这一点？

【问题讨论】：

标签： javascript jquery html css templates

【解决方案1】：

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

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

（未测试）

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

另外，我已经看到仅使用顶部带有“牙齿”的背景图像（下面是丑陋的 ASCII 草图）来实现这一点：

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

那么你只需要确保：

<div> 将此图像作为背景图像（不重复，顶部，左侧），
背景图片总是大于<div>（双向），并且
<div> 有一个额外的顶部填充（等于箭头的“大小”）。

【讨论】：

【解决方案2】：

不确定这是否是您要寻找的...有一种纯 CSS 方法可以做到这一点，我经常这样做。它被描述为here，以及其他地方。

要使牙齿朝上，请为牙齿添加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 需要进行大量调整。

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

【讨论】：