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. 15. 23:14

반응형

[즐거'웅'코드] 목차

  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
 
<span class="arrow right"></span>
<span class="arrow bottom"></span>
<span class="arrow top"></span>
<span class="arrow left"></span>
 
<style>
    .arrow {
        display: inline-block;
        background: #ad1e51;
        position: relative;
        margin-right: 30px;
    }
 
    .arrow.top, .arrow.bottom {
        width: 10px;
        height: 20px;
    }
 
    .arrow.left, .arrow.right {
        width: 20px;
        height: 10px;
    }
 
    .arrow:after {
        content: '';
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
    }
 
    .arrow.top:after {
        top: -40px;
        left: -10px;
        border-width: 20px 15px;
        border-color: transparent transparent #ad1e51 transparent;
    }
 
    .arrow.bottom:after {
        top: 20px;
        left: -10px;
        border-width: 20px 15px;
        border-color: #ad1e51 transparent transparent transparent;
    }
 
    .arrow.left:after {
        top: -10px;
        left: -40px;
        border-width: 15px 20px;
        border-color: transparent #ad1e51 transparent transparent;
    }
 
    .arrow.right:after {
        top: -10px;
        left: 20px;
        border-width: 15px 20px;
        border-color: transparent transparent transparent #ad1e51;
    }
</style>
구현 예시
반응형
저작자표시

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

(즐거웅코드) 자바스크립트 버튼 클릭 시 자기 자신의 id 가져오기  (0) 2021.05.17
(즐거웅코드) CSS로 말풍선 만들기  (0) 2021.05.16
(즐거웅코드) CSS로 삼각형 만들기  (0) 2021.05.14
(즐거웅코드) CSS 휴대폰(iOS, Android 등) 기본 버튼 스타일 제거하기  (0) 2021.05.13
(즐거웅코드) 제이쿼리 radio 버튼으로 객체 보였다 숨겼다 제어하기  (0) 2021.05.12

관련글

댓글 0

티스토리툴바