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;
이제 응용해 봅시다. :
Buongiorno!
<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);
}
Comments