[해피CGI][cgimall] 말풍선 만들기 only CSS

 

 

css
 

.balloon_01 {
 position:relative;
 margin: 50px;
 width:400px;
 height:100px;
  background:pink;
  border-radius: 10px;
}
.balloon_01:after {
 border-top:0px solid transparent;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-bottom: 10px solid pink;
 content:"";
 position:absolute;
 top:-10px;
 left:200px;
}

 

.balloon_02 {
 position:relative;
 margin: 50px;
 width:400px;
 height:100px;
  background:blue;
  border-radius: 10px;
}
.balloon_02:after {
 border-top:0px solid transparent;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-bottom: 10px solid blue;
 content:"";
 position:absolute;
 top:-10px;
 left:200px;
}

.balloon_03 {
 position:relative;
 margin: 50px;
 width:400px;
 height:100px;
  background:#333333;
  border-radius: 10px;
}
.balloon_03:after {
 border-top:15px solid #333333;
 border-left: 15px solid transparent;
 border-right: 0px solid transparent;
 border-bottom: 0px solid transparent;
 content:"";
 position:absolute;
 top:10px;
 left:-15px;
}
 

html

<div class="balloon_01"></div>

 

<div class="balloon_02"></div>

<div class="balloon_03"></div>
 

css 만으로 말풍선을 제작할 수 있습니다.

화살표는 보더속성을 응용하여 제작이 되었으며 기존 소스를 변경하여 방향 크기등을 자유롭게 변경이 가능합니다