JQueryを使ってdivに歯を追加する簡単な方法はありますか？

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. この画像を有する背景画像であるはいつもより大きく、両方ともより大きく、
3. <div>は余分な上部パディング（矢印のサイズに等しい）を持っています。

Answer 2

あなたが探しているものがわからない場合は、これを行うための純粋なCSS方法があります。これはかなり役に立ちます。とりわけ、hereと記載されています。

、上向きの歯を作る歯のためのdivを追加するには：その後、0ピクセル矩形の厚い底部の境界線を使用して、スタイル...

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

CSSは、微調整の多くが必要になります：jQueryプラグインとして

は、次のようになります。

ハローアウトされた三角形を作成することは、互いにマスキングする2つの矩形を必要とするため、少し難しくなります。私はこれを（そしてもっと複雑なものを、実際には）やったことがありますが、正直言って、グラフィックを作成してそれを追加し、同様の方法で配置する方が簡単かもしれません。