Omatic Hacker's Blog

Демо:

Як це все діло працює?

Чи задумувались ви як браузер промальовує границі? Ось цю технологію ми зараз і використаємо.
Наприклад, одна сторона границі замальована у якийсь колір,а остальні прозорі. Тоді ставимо ширину границі, якусь досить велику, наприклад більше 20 пікселів та отримуємо стрілку.

Для демонстрації я використав 4 кольори red green blue orange, суцільного залиття solid, ширина границі 20 пікселів.

Досить цікаво вийшло, правда ж? Ось код всього цього:

<div class="css-arrow-multicolor"></div>

.css-arrow-multicolor {
  border-color: red green blue orange;
  border-style:solid;
  border-width:20px;
  width:0;
  height:0;
}

Ну от, як ви замітили, у цьому квадраті є чотири прямокутних трикутника. Можна з ними поексперементувати і дістати різні види, наприклад так:

<div class="css-arrow-acute"></div>

.css-arrow-acute {
  border-color: red green blue orange;
  border-style:solid;
  border-width:25px 10px 15px 30px;
  width:0;
  height:0;
}

А якщо до цього всього підійти творчно, то можна отримати цікаві речі:

border-style:dotted;

border-style:dashed;

border-style:outset;

border-style:inset;

border-style:ridge;

border-style:groove;

А до чого я це все веду? Так… зараз повсюди Web 2.0, і стилістично модною стала тенденція в так званих чатових бульбашках. Ось покажу як це можна огрганізувати:

<div class="chat-bubble">
  Бульбашка!
  <div class="chat-bubble-arrow-border"></div>
  <div class="chat-bubble-arrow"></div>
</div>

.chat-bubble {
  background-color:#EDEDED;
  border:2px solid #CCCCCC;
  font-size:35px;
  line-height:1.3em;
  margin:10px auto;
  padding:10px;
  position:relative;
  text-align:center;
  width:300px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -moz-box-shadow:0 0 5px #888888;
  -webkit-box-shadow:0 0 5px #888888;
}

.chat-bubble-arrow-border {
  border-color: #CCCCCC transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-22px;
  left:30px;
}

.chat-bubble-arrow {
  border-color: #EDEDED transparent transparent transparent;
  border-style: solid;
  border-width: 10px;
  height:0;
  width:0;
  position:absolute;
  bottom:-19px;
  left:30px;
}

Але цей метод не є коректний для всіми любимого IE6 (сарказм? ні…)
Та для нього ми дещо підкрутимо. Для тих границь, яким ми присвоювали прозорий колір, тепер присвоюємо якийсь з палітри. Наприклад улюблений колір дизайнерів (знов сарказм? та ні…) – рожевий! А потім просто накладуємо на нього філтр chroma, щоб отримати прозорість. Ось і код, відповідно в своєму шаблоні треба робити перевірку на браузер користувача… а що ж робити?!

 /* IE6 */
.chat-bubble-arrow {
    _border-left-color: pink;
    _border-bottom-color: pink;
    _border-right-color: pink;
    _filter: chroma(color=pink);
}

Загалом заокруглення або так званий border-radius це стиль з CSS3, тому не підтримується Internet Explorer та Opera, поки =\ Але надія є на Firefox, Safari, Chrome. Тому раджу заокруглення кутів робити за допомогою Javascript або просто графічно.

P.S. Надіюсь ця невеличка стаття допоможе вам;

навіяло джерелом