Есть ли простой способ добавить зубы в div, используя JQuery?

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 ниже):

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

Тогда вам просто нужно убедиться, что:

1. <div> имеет это изображение в качестве фонового изображения (без повтора, вверху, слева),
2. Фоновое изображение всегда больше <div> (в обоих направлениях), а
3. <div> имеет дополнительный верхний отступ (равный «размеру» стрелки).

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 потребуется много доработок.

Создать сложный треугольник немного сложнее, так как вам нужно два прямоугольника, маскирующих друг друга.Я сделал это (и, на самом деле, более сложные вещи), но, честно говоря, возможно, проще просто создать графику, а затем добавить и расположить ее аналогичным образом.