말풍선 만들기 only CSS happycgi

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 기타효과 > 말풍선 만들기 only CSS 상세정보

클라우드태그

Javascript

PHP

asp

CSS

html

mysql

jquery

image

Mobile

API

slide

게시판

메뉴

현재접속자 명

말풍선 만들기 only CSS

해피팀

네티즌

소스분류

기타효과

다운로드 횟수

196 회

간단설명

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