Question

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

它给它一个向外的牙齿。

在JQuery中有一种简单易行的方法吗？

Answer 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>有一个额外的顶部填充（等于箭头的“大小”）。

Answer 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需要进行大量调整。

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

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

2 个答案: