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. 14. 11:37

반응형

[즐거'웅'코드] 목차

  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
 
<span class="triangle right"></span>
<span class="triangle bottom"></span>
<span class="triangle top"></span>
<span class="triangle left"></span>
 
<style>
    .triangle {
        display: inline-block;
        width: 0;
        height: 0;
        border: 30px solid;
    }
 
    .triangle.top {
        border-color: transparent transparent #ad1e51 transparent;
    }
 
    .triangle.bottom {
        border-color: #ad1e51 transparent transparent transparent;
    }
 
    .triangle.left {
        border-color: transparent #ad1e51 transparent transparent;
    }
 
    .triangle.right {
        border-color: transparent transparent transparent #ad1e51;
    }
</style>
구현 예시
반응형
저작자표시

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

(즐거웅코드) CSS로 말풍선 만들기  (0) 2021.05.16
(즐거웅코드) CSS로 화살표 만들기  (0) 2021.05.15
(즐거웅코드) CSS 휴대폰(iOS, Android 등) 기본 버튼 스타일 제거하기  (0) 2021.05.13
(즐거웅코드) 제이쿼리 radio 버튼으로 객체 보였다 숨겼다 제어하기  (0) 2021.05.12
(즐거웅코드) 자바스크립트 radio 버튼으로 객체 보였다 숨겼다 제어하기  (0) 2021.05.11

관련글

댓글 0

티스토리툴바