Saf CSS kullanarak bir "ipucu kuyruğu" nasıl oluşturabilirim?

Güzel bir CSS numarasıyla karşılaştım. Kemana bak ...

.tooltiptail {
  display: block;
  border-color: #ffffff #a0c7ff #ffffff #ffffff;
  border-style: solid;
  border-width: 20px;
  width: 0px;
  height: 0px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}

<div>Cool Trick:
  <br />
  <div class="tooltiptail"></div>
</div>
<br />

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

Bu, küçük bir ok / üçgen benzeri efekt, bir "ipucu kuyruğu" yaratır. Bu aklımı başımdan alıyor! Bunun nasıl çalıştığını bilmekle gerçekten ilgileniyorum ?!

Ayrıca, aşağıdaki gibi bir efekt oluşturmak için bu CSS numarasını genişletmenin bir yolu var mı:

Bu ilginç bir problem. Bu, şimdilik gölge göz ardı edilerek yalnızca CSS kullanılarak yapılabilir mi?

GÜNCELLEME 1

İlk soruma bir çözüm buldum. İşte keman ...

http://jsfiddle.net/duZAx/7/

HTML

<div style="position: relative;">Cool Trick:<br />
    <div class="tooltiptail"></div>
    <div class="tooltiptail2"></div>
</div>

CSS

.tooltiptail {
    display: block;
    border-color: #ffffff #a0c7ff #ffffff #ffffff;
    border-style: solid;
    border-width: 20px;
    width: 0px;
    height: 0px;
}
.tooltiptail2 {
    display: block;
    border-color: transparent #ffffff transparent transparent;
    border-style: solid;
    border-width: 18px;
    width: 0px;
    height: 0px;
    position: relative;
    left: 4px;
    top: -38px;
}

Şimdi, gölge dahil olmak üzere saf CSS kullanarak ve tarayıcılar arası uyumlu olmasını sağlayarak yukarıdaki küçük resmi tam olarak nasıl taklit edebilirim?

GÜNCELLEME 2

İşte aşağıdaki cevapların bir kombinasyonundan sonraki çözümüm. Birden fazla tarayıcıda test etmedim, ancak Chrome'da harika görünüyor.

http://jsfiddle.net/UnsungHero97/MZXCj/688/

HTML

<div id="toolTip">
    <p>i can haz css tooltip</p>
    <div id="tailShadow"></div>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

CSS

#toolTip {
    background-color: #ffffff;
    border: 1px solid #73a7f0;
    width: 200px;
    height: 100px;
    margin-left: 32px;
    position:relative;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    box-shadow: 0px 0px 8px -1px black;
    -moz-box-shadow: 0px 0px 8px -1px black;
    -webkit-box-shadow: 0px 0px 8px -1px black;
}

#toolTip p {
    padding:10px;
}

#tailShadow {
    background-color: transparent;
    width: 4px;
    height: 4px;
    position: absolute;
    top: 16px;
    left: -8px;
    z-index: -10;
    box-shadow: 0px 0px 8px 1px black;
    -moz-box-shadow: 0px 0px 8px 1px black;
    -webkit-box-shadow: 0px 0px 8px 1px black;
}

#tail1 {
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #73a7f0 transparent transparent;
    position:absolute;
    top: 8px;
    left: -20px;
}

#tail2 {
    width: 0px;
    height: 0px;
    border: 10px solid;
    border-color: transparent #ffffff transparent transparent;
    position:absolute;
    left: -18px;
    top: 8px;
}

İşte kutu gölgeli bir örnek, tüm son sürüm tarayıcıları bunu desteklemelidir

http://jsfiddle.net/MZXCj/1/

HTML:

<div id="toolTip">
    <p>i can haz css tooltip</p>
    <div id="tailShadow"></div>
    <div id="tail1"></div>
    <div id="tail2"></div>
</div>

CSS:

body {font-family:Helvetica,Arial,sans-serif;}

#toolTip {
    position:relative;
}

#toolTip p {
    padding:10px;
    background-color:#f9f9f9;
    border:solid 1px #a0c7ff;
    -moz-border-radius:5px;-ie-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;border-radius:5px;
}

#tailShadow {
    position:absolute;
    bottom:-8px;
    left:28px;
    width:0;height:0;
    border:solid 2px #fff;
    box-shadow:0 0 10px 1px #555;
}

#tail1 {
    position:absolute;
    bottom:-20px;
    left:20px;
    width:0;height:0;
    border-color:#a0c7ff transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}

#tail2 {
    position:absolute;
    bottom:-18px;
    left:20px;
    width:0;height:0;
    border-color:#f9f9f9 transparent transparent transparent;
    border-width:10px;
    border-style:solid;
}

body {
  font-family: Helvetica, Arial, sans-serif;
}
#toolTip {
  position: relative;
}
#toolTip p {
  padding: 10px;
  background-color: #f9f9f9;
  border: solid 1px #a0c7ff;
  -moz-border-radius: 5px;
  -ie-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#tailShadow {
  position: absolute;
  bottom: -8px;
  left: 28px;
  width: 0;
  height: 0;
  border: solid 2px #fff;
  box-shadow: 0 0 10px 1px #555;
}
#tail1 {
  position: absolute;
  bottom: -20px;
  left: 20px;
  width: 0;
  height: 0;
  border-color: #a0c7ff transparent transparent transparent;
  border-width: 10px;
  border-style: solid;
}
#tail2 {
  position: absolute;
  bottom: -18px;
  left: 20px;
  width: 0;
  height: 0;
  border-color: #f9f9f9 transparent transparent transparent;
  border-width: 10px;
  border-style: solid;
}

<div id="toolTip">
  <p>i can haz css tooltip</p>
  <div id="tailShadow"></div>
  <div id="tail1"></div>
  <div id="tail2"></div>
</div>

İşte ilk sorunuzu yanıtlamak için bir açıklama (tembel olduğum için gerçek CSS'yi başkalarına bırakacağım - lütfen oyları hak ettiğini düşündüğünüz yanıtlarını oylayın!):

Bu, küçük bir ok / üçgen benzeri efekt, bir "ipucu kuyruğu" yaratır. Bu aklımı başımdan alıyor! Bunun nasıl çalıştığını bilmekle gerçekten ilgileniyorum ?!

1. Farklı kenar renklerine sahip ancak aynı stilde (sizin durumunuzda solid) bir kenarlık oluştururken , bitişik köşelerin her bir çiftini ayıran dikiş, çapraz bir çizgidir. Bu ne oldukça benziyor burada diyagram ait tasvir groove, ridge, insetve outsetsınır stilleri.

   Tüm tarayıcıların aynı şekilde davrandığına ve hatırlayabildiğim kadarıyla bunu yaptığına dikkat edin, bu davranış ne CSS2.1 spesifikasyonunda ne de CSS Arka Planları ve Kenarlıkları modülünde tam olarak tanımlanmamıştır. İkincisi, köşelerdeki renk ve stil geçişlerini açıklayan bir bölüme sahiptir ve açıklama, sıfır köşe yarıçapına sahip sınırlar için, oluşturulan çizginin aslında dolgu kenarının köşesini köşenin köşesiyle birleştiren bir çizgi olduğunu ima ediyor gibi görünmektedir. sınır kenarı (eşit genişlikte kenarlıklar için 45 derecelik açılı bir çizgi ile sonuçlanır), ancak teknik yine de bunun her zaman böyle olmayabileceği konusunda uyarıyor (özellikle sıfır köşe yarıçapına sahip sınırları açıkça hesaba katmadığı için). ¹

2. By içerik (orijinal W3C) kutu modeli içeriği boyutları 0x0 olarak tanımlandığı için genel olarak, bir 40x40 alanı, 20 piksel sınırları dışında oluşturulur.

3. Bir karenin dört köşesini birleştiren çapraz çizgilerle bölünmesi, dik açıları karenin orta noktasında birleşen dört dik üçgenle sonuçlanır (aşağıya bakın).

4. Üst, alt ve sol kenarlıklar .tooltiptailöğenin kapsayıcısının arka planıyla eşleşecek şekilde beyazdır , sağ kenarlık ise araç ipucunun arka plan rengiyle eşleşecek şekilde mavi bir gölgedir:

   border-color: #ffffff #a0c7ff #ffffff #ffffff;
   

Sonuç şudur, kenarlıklar etiketlenmiştir ve sınır sınırları benim güvenilir Çizgi Aracım kullanılarak eklenmiştir:

Araç ipucu kuyruğunu yeniden yönlendirmek, yalnızca araç ipucu rengini değiştirme meselesidir. Örneğin, bu bir ucun altına bağlı bir kuyruk verir:

border-color: #a0c7ff #ffffff #ffffff #ffffff;

jsFiddle önizlemesi

¹ _{Standartlara uygunluk konusunda titizseniz, tüm bunları bir hack olarak düşünebilirsiniz.}

Bu ipucunu sadece bir tane ile yapıyorum div öğe .

HTML:

<div class="tooltip">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent augue justo, venenatis non tincidunt sit amet, suscipit eget ligula.</div>

CSS:

.tooltip{
    position: relative;
    border: 1px solid #73a7f0;
    width: 200px;
    margin-left: 20px;
    padding: 5px 14px;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
    -webkit-box-shadow: -0px 0px 6px rgba(0, 0, 0, .7);
    -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .7);
}
.tooltip:before{
    content: ' ';
    display: block;
    position: absolute;
    left: -8px;
    top: 15px;
    width: 14px;
    height: 14px;
    border-color: #73a7f0;
    border-width: 1px;
    border-style: none none solid solid;
    background-color: #fff;
    box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    -webkit-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    -moz-box-shadow: -2px 2px 3.5px rgba(0, 0, 0, .5);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
}

Demo

Açıklama:

Diğer örnekte olduğu gibi kenarlıklı normal div'im var. Kuyruk, CSS'nin basit bir kombinasyonudur:

• Sözde seçiciyi kullanıyorum: önce (: sonra da iyi çalışıyor)
• Kuyruğu görünür kılmak için içeriği beyaz bir boşlukla zorlarım.
• Araç ipucunun yan tarafındaki köşeyi sabitlemek için kutumu 45 dereceden döndürüyorum
• Boyut ve konum için sürpriz yok.
• İstediğim 2 tarafa bordür ekliyorum.
• Ve sonunda gölgeleri dış sınıra ekliyorum.

Gölgesiz araç ipucu

.abubble {
  position: relative;
  border: 1px solid #a0c7ff;
  width: 100px;
  height: 100px;
}
.ashadow {
  position: absolute;
  display: inline-block;
  background: transparent;
  width: 10px;
  height: 10px;
  left: 50px;
  top: 100px;
  -moz-box-shadow: 0px 10px 30px #000;
  -webkit-box-shadow: 0px 10px 30px #000;
  box-shadow: 0px 10px 30px #000;
}
.atail {
  position: absolute;
  display: inline-block;
  border-width: 20px;
  border-style: solid;
  border-color: #a0c7ff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: 30px;
  top: 100px;
}
.atail2 {
  position: relative;
  display: inline-block;
  border-width: 19px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: -19px;
  top: -20px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

<div class="abubble">
  <div class="atail">
    <div class="atail2">
    </div>
  </div>
</div>

Fiddle Demo

Shadow ile (WebKit'te biraz tuhaf görünüyor ... sanırım optimize etmeliyim):

.abubble {
  position: relative;
  border: 1px solid #a0c7ff;
  width: 100px;
  height: 100px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}
.ashadow {
  position: absolute;
  display: inline-block;
  background: transparent;
  width: 10px;
  height: 10px;
  left: -5px;
  top: -16px;
  -moz-box-shadow: 0px 10px 20px #000;
  -webkit-box-shadow: 0px 10px 20px #000;
  box-shadow: 0px 10px 20px #000;
}
.atail {
  position: absolute;
  display: inline-block;
  border-width: 20px;
  border-style: solid;
  border-color: #a0c7ff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: 30px;
  top: 100px;
}
.atail2 {
  position: relative;
  display: inline-block;
  border-width: 19px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  width: 0px;
  height: 0px;
  left: -19px;
  top: -20px;
}
.anothertail {
  background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png);
  display: block;
  height: 29px;
  width: 30px;
}

<div>How do I get this effect with only CSS?
  <br />
  <div class="anothertail"></div>
</div>

<div class="abubble">
  <div class="atail">
    <div class="ashadow"></div>
    <div class="atail2">
    </div>
  </div>
</div>

Demo 1 , Demo 2

Crossbrowser yaklaşımı:

.tooltip {
  position:relative;
  padding:10px;
  border-bottom:1px solid #000;
  background:#ccc;
}

.arrow {
    background:transparent;
    display:inline-block;
    position:absolute;
    bottom:-20px;
    border-left:10px solid transparent;
    border-bottom:10px solid transparent;
    border-top:10px solid #000;
    border-right:10px solid transparent; 
}
.arrow i {
    display:inline-block;
    position:absolute;
    top:-10px;
    left:-9px;
    width:0;
    height:0;
    border-left:9px solid transparent;
    border-bottom:9px solid transparent;
    border-top:9px solid #ccc;
    border-right:9px solid transparent;
}
* html .arrow {
    border-bottom-color:white;
    border-left-color:white;
    border-right-color:white;
    filter: chroma(color=white);
}
* html .arrow i {
    border-bottom-color:white;
    border-left-color:white;
    border-right-color:white;
    filter: chroma(color=white);
}

<div class="tooltip">
    <span class="arrow"><i></i></span>
    Tooltip text that wants to be your friend.
</div>

Bu, IE7 + 'dan çalışır (IE6'da ( filter: chroma(color=white);) kullanarak da çalışır, ancak okun etrafındaki siyah kenarlığı göstermez).

IE6 düzeltmesi:

* html .arrow {
        border-bottom-color:white;
        border-left-color:white;
        border-right-color:white;
        filter: chroma(color=white);

}
* html .arrow i
        {
        border-bottom-color:white;
        border-left-color:white;
        border-right-color:white;
        filter: chroma(color=white);
        }

Bu, IE6 tarafından oluşturulan çirkin siyah saydamlığı, kroma filtresinde belirttiğiniz renk haline getirecek (beyaz yaptım, böylece arka planda kaybolacak).

Bunu CSS3 rotasyonu ile yapabilirsiniz, ancak CSS3 uyumlu olmayan tarayıcılarda başarısız olur:

.tooltip {
    position:relative;
    padding:10px;
    background:#ccc;
    border-bottom:1px solid #000;
}
.tooltip:before {
    content:"";
    display:block;
    width:10px;
    height:10px;
    position:absolute;
    bottom:-6px;
    border-left:1px solid #000;
    border-bottom:1px solid #000;
    background:#ccc;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

<div class="tooltip"> 
    Tooltip text that wants to be your friend.
</div>

CSS'nin: before ve: after sözde öğelerinden yararlanabilirsiniz. Örneğin,: before bir üçgen eklemek için ve: sonra bir dikdörtgen eklemek için kullanılabilir. Bu ikisinin birleşimi bir balon araç ipucu oluşturur

Örneğin :

a[bubbletooltip]:before
{
    content: "";
    position: absolute;
    border-bottom: 21px solid #e0afe0;
    border-left: 21px solid transparent;
    border-right: 21px solid transparent;
    visibility: hidden;
    bottom: -20px;
    left: -12px;
}

a[bubbletooltip]:after
{
    position: absolute;
    content: attr(bubbletooltip);
    color: #FFF;
    font-weight:bold;
    bottom: -35px;
    left: -26px;
    white-space: nowrap;
    background: #e0afe0;
    padding: 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
    border-radius: 6px;
    visibility: hidden;
}

Çevrimiçi bir araç http://www.careerbless.com/services/css/csstooltipcreator.php adresinde mevcuttur.