css 말풍선용 삼각형 만들기 수도클래스 팁

출처: http://firejune.com/1533/%EC%88%9C%EC%88%98+CSS%EB%A1%9C+%EC%82%BC%EA%B0%81%ED%98%95(%ED%99%94%EC%82%B4%ED%91%9C)+%EC%83%9D%EC%84%B1%ED%95%98%EA%B8%B0

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

}

***추가로 pseudo class 응용하여

.cont-btn:after{ /*마름모*/

content:"";display:block;

position:absolute;left:24px;top:13px;z-index:1;

width:23px;height:23px;

border-radius:8px;

border:2px solid transparent;

border-color:transparent transparent dodgerblue dodgerblue;background-color:cornflowerblue;

transform:rotate(225deg) translateY(14px);

-ms-transform:rotate(225deg) translateY(14px);

-webkit-transform:rotate(225deg) translateY(14px);

-moz-transform:rotate(225deg) translateY(14px);

-o-transform:rotate(225deg) translateY(14px);

}

이런식으로 처리함.

.cont-btn:before{ /*텍스트*/

content:"버튼";z-index:2;

position:absolute;left:15px;top:12px;

}

또다른 응용으로 before 수도클래스 사용하여 텍스트도 넣는다