일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- #해피CGI
- 홈페이지
- #image
- #홈페이지
- CGIMALL
- 해피CGI
- happycgi
- #happycgi
- #웹솔루션
- 게시판
- #홈페이지제작
- #cgimall
- 웹솔루션
- #jQuery
- #솔루션
- #쇼핑몰
- 사이트제작
- 홈페이지제작
- #CSS
- #이미지
- php
- #뉴스
- 해피씨지아이
- 솔루션
- javascript
- jquery
- #업종별
- 쇼핑몰
- CSS
- #동영상
- Today
- Total
웹솔루션개발 22년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] 말풍선 만들기 only CSS 본문
css
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_02"></div>
<div class="balloon_03"></div>
css 만으로 말풍선을 제작할 수 있습니다.
화살표는 보더속성을 응용하여 제작이 되었으며 기존 소스를 변경하여 방향 크기등을 자유롭게 변경이 가능합니다