보통 테두리를 만들때 아래와 같이 border를 사용하여 라인의 굵기와 형태 색상을 지정하고 background-color를 사용하여 배경색상을 출력합니다.
<div class="CommArea">
내용글
</div>
.CommArea { position:relative; width:100%; border:1px solid #eee; background-color:#fafafa; padding:5px; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,.2); }
테두리에 화살표 모양(댓글형태)을 추가할려면 이미지를 사용해도 되지만 css만으로 구현할 수도 있습니다.
1. Html 과 css
<div class="arrow-container">
<span class="arrow-outer"></span>
<span class="arrow-inner"></span>
</div>
<div class="CommArea">
내용글
</div>
.arrow-container { position:relative; display:inline-block; top:2px; left:7px; z-index:1 }
.arrow-outer { position:absolute; width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-bottom:10px solid #eee; /* 외부 테두리 색상 */ }
.arrow-inner { position:absolute; top:2px; /* 테두리 두께에 따라 조정 */ left:2px; /* 테두리 두께에 따라 조정 */ width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid #fafafa; /* 내부 색상 */ }
2. css만으로 구현
.CommArea:after {
content:"";
position:absolute;
display:block;
left:15px;
top:-7px;
width:10px;
height:10px;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
background-color:#fafafa;
border-left:2px solid #eee !important;
border-top:2px solid #eee !important;
}
위와 같이 화살표 css를 만들어 주면 이미지 없이 화살표가 구현됩니다.