I'm

Developer, Designer, Photographer

GET IN TOUCH

  • Buk-gu, Busan, Republic of Korea
  • ungdoli0916@naver.com
  • Kakao ID : Ungdoli
Your message has been sent. Thank you!
(즐거웅코드) CSS로 말풍선 만들기

· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT
2021. 5. 16. 14:27

반응형

[즐거'웅'코드] 목차

  1. 예제 소스
  2. 구현 예시
예제 소스
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
 
<div class="balloon right"><span>말풍선(오른쪽)</span></div>
<div class="balloon top"><span>말풍선(위)</span></div>
<div class="balloon bottom"><span>말풍선(아래)</span></div>
<div class="balloon left"><span>말풍선(왼쪽)</span></div>
 
<style>
    .balloon {
        position: relative;
        display: inline-block;
    }
 
    .balloon span {
        display: inline-block;
        padding: 10px;
        color: #fff;
        background: #ad1e51;
        border-radius: 20px;
    }
 
    .balloon:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
    }
 
    .balloon.right:after, .balloon.left:after {
        border-width: 10px 15px;
        top: 50%;
        margin-top: -10px;
    }
 
    .balloon.top:after, .balloon.bottom:after {
        border-width: 15px 10px;
        left: 50%;
        margin-left: -10px;
    }
 
    .balloon.top:after {
        border-color: #ad1e51 transparent transparent transparent;
        bottom: -25px;
    }
 
    .balloon.bottom:after {
        border-color: transparent transparent #ad1e51 transparent;
        top: -25px;
    }
 
    .balloon.left:after {
        border-color: transparent #ad1e51 transparent transparent;
        left: -25px;
    }
 
    .balloon.right:after {
        border-color: transparent transparent transparent #ad1e51;
        right: -25px;
    }
</style>
구현 예시
반응형
저작자표시

'· 즐거'웅' 코드 (Source) > HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

(즐거웅코드) 제이쿼리 버튼 클릭 시 자기 자신의 id 가져오기  (0) 2021.05.18
(즐거웅코드) 자바스크립트 버튼 클릭 시 자기 자신의 id 가져오기  (0) 2021.05.17
(즐거웅코드) CSS로 화살표 만들기  (0) 2021.05.15
(즐거웅코드) CSS로 삼각형 만들기  (0) 2021.05.14
(즐거웅코드) CSS 휴대폰(iOS, Android 등) 기본 버튼 스타일 제거하기  (0) 2021.05.13

관련글

댓글 0

티스토리툴바