Форумы портала PHP.SU :: Аккуратный pop-up

Все началось с обсуждения треугольников средствами HTML/CSS...
...потом треугольники с границей, треугольник от pop-up'а...
А зачем нужен треугольник от pop-up'а без самого pop-up'а? Голливудская улыбка

Вот и родилась мысль: "А не слабо ли мне сделать pop-up аналогичной виндовскому? (закругленные границы и треугольничек снизу)"
"А не слабо!" - ответил я и получит вот такой результат

CODE (html):
скопировать код в буфер обмена

<div id="btn">
Hover on me!
  <div class="popup">
  <h3>Your header here</h3>
    <p>Your text<br />here</p>
  </div>
</div>

CODE (CSS):
скопировать код в буфер обмена

/*Created by IllusionMH*/
/*стили документа не вызывающие никакого интереса*/
body {
  background-color: #ffffff;
}
h3 {
margin: 5px 0px;
}
#btn {
  position: absolute;
  left: 200px;
  top: 200px;
}
 
/*основная часть pup-up'а. Надеюсь тут ничего объяснять не нужно*/
.popup {  
  background: #f4f4f4;  
  border: 1px solid #000000;  
  padding: 10px;
  width: 150px;  
  height: 85px;  
  position: absolute;
  border-radius: 10px;
  right: 10px;
  bottom: 32px;
}
 
.popup:before { /*треугольник который создает внешнюю границу*/
  border-bottom: 23px solid transparent;
  border-right: 23px solid #000000;
 
  position: absolute;
  bottom: -23px;
  right: 10px;
 
  content: '';
}
.popup:after { /*треугольник который создает "выпирающую" часть сливающуюся с фоном*/
  border-left: 20px solid transparent;
  border-top: 20px solid #f4f4f4;
 
  position: absolute;
  bottom: -20px;
  right: 11px;
 
  content: '';
}
 
.popup {display: none;} /*прячем все pop-up'ы, т.к. они нам не нужны, пока мы не наведем на соответствующие*/
 
#btn:hover .popup {display: block;} /*отображаем pop-up принадлежащий элементу #btn при наведении на #btn*/
 