Firejune

4년만에 블로그를 대대적으로 성형하고 있습니다. 최근 코멘트 출력부를 과감히 수정했는데 이곳의 스타일을 풍선말과 유사한 느낌을 주기 위해서 화살표 부분을 순수 CSS만으로 작성했습니다. 날로 먹겠거니 생각했는데 예상했던 것 이상으로 까다롭더군요. 그래서 요소의 보더와 색상 CSS 속성을 이용한 삼각형 사용방법에 대하여 정리해 보았습니다.

예제 :

삼각형이 그려지는 원리는 간단합니다. 요소의 스타일에 보더 속성을 두껍게 적용하면 모서리로부터 만들어지는 사선과 색상을 교묘히 조합하여 만들어내는 일종의 트릭입니다. 이해를 돕기위해 여기에 몇몇 예제를 작성했습니다. :

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

요소의 높이와 너비는 0입니다. 그리고 보더의 너비는 20픽셀이며 각각 다른 색상을 지정했을 때 위와 같은 결과를 볼 수 있습니다. 그리고 약간의 창의력을 발휘하면 다양한 모양을 만들어 낼 수 있습니다. :

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

border-style:double;

이제 응용해 봅시다. :

<div class="chat-bubble">
  Buongiorno!
  <div class="chat-bubble-arrow-border"></div>
  <div class="chat-bubble-arrow"></div>
</div>

.chat-bubble {
  background-color:#EDEDED;
  border:2px solid #666666;
  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: #666666 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 에서 발생합니다. 아래와 같은 CSS 핵을 이용하여 처리할 수 있습니다.

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