Как я могу создать "хвост подсказки" с помощью чистого CSS?

вот объяснение, чтобы ответить на ваш первый вопрос (я оставлю фактический CSS другим, поскольку я ленив - пожалуйста, озвучьте свои ответы, которые, по вашему мнению, заслуживают голосов!):

это создает небольшой эффект стрелки / треугольника, "хвост подсказки". Это сводит меня с ума! мне действительно интересно знать, как это работает?!

1. при рендеринге границы с различными цветами края, но в том же стиле (в вашем случае, solid), шов разделяющий каждую пару смежных углов является диагональной линией. Это очень похоже на то, что здесь схемы изображает из groove,ridge,inset и outset границы стилей.

   обратите внимание, что, хотя все браузеры ведут себя одинаково и делали это до тех пор, пока я помню, это поведение не полностью определено ни в спецификации CSS2.1, ни в модуле CSS Backgrounds and Borders. Последний имеет раздел, описывающий цвет и стиль переходы по углам, и описание, по-видимому, подразумевает, что для границ с нулевыми угловыми радиусами линия, которая визуализируется, на самом деле является линией, которая соединяет угол края заполнения с углом края границы (что приводит к 45-градусной угловой линии для границ равной ширины), но спецификация все еще предупреждает, что это может быть не всегда так (тем более, что она даже не учитывает границы с нулевыми угловыми радиусами явно.)¹

2. на content (original W3C) box model, область 40x40 создается из 20-пиксельных границ, при этом размеры содержимого определяются как 0x0.

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

4. верхняя, нижняя и левая границы белый чтобы соответствовать фону .tooltiptail контейнер элемента, в то время как правая граница имеет оттенок синего, чтобы соответствовать цвету фона подсказки:

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

результат таков, с помеченными границами и границами границ, добавленными с помощью моего надежного инструмента Line:

переориентация хвоста подсказки-это просто вопрос переключения цвета подсказки вокруг. Например, это даст хвост, который прикреплен к дну из подсказки:

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

jsFiddle просмотра

---

¹_{если вы сторонник соблюдения стандартов, вы можете также считать все это взломом.}

Я делаю эту подсказку только с одним div элемент.

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

демо

объяснение:

у меня есть мой обычный div с границей так же, как и другой пример. Хвост-это простая комбинация CSS:

• я использую псевдо селектор: before (: after тоже отлично работает)
• я заставляю содержание с белым пространством, чтобы сделать хвост видимый.
• я поворачиваю свою коробку от 45deg, чтобы исправить угол в боковой части подсказки
• не удивительно для размера и позиционирования.
• я добавляю границу на 2 стороны, которые я хочу.
• и, наконец, я добавляю тень к внешней границе.

подсказка без тени

.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>

Скрипка Демо

---

С ТЕНЬЮ (выглядит немного странно в WebKit... надо оптимизировать его я думаю):

.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>

демо 1,Demo 2

кроссбраузерный подход:

.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>

это работает с IE7+ (работает в IE6 с помощью (filter: chroma(color=white);) тоже, но не будет отображать черную границу вокруг стрелки).

IE6 исправить:

* 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);
        }

это сделает уродливую черную прозрачность, которая отображается IE6 цветом, который вы указали в фильтре цветности (я сделал Белый, поэтому он исчезает в фоновом режиме).

---

CSS 3 подход:

вы можете сделать это с помощью CSS3 rotation, но потерпите неудачу в браузерах, не совместимых с CSS3:

.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>

вы можете использовать :before и :after псевдо-элементы CSS. Например,: before можно использовать для вставки треугольника и: after для вставки прямоугольника. Сочетание этих двух создает подсказку пузыря

например :

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;
}

онлайн-инструмент доступен по адресу http://www.careerbless.com/services/css/csstooltipcreator.php