ccs로 화살표 만들기 1

너비와 폭을 같은 수치로 지정해서 정사각형을 만듭니다.
그리고 border로 테두리를 만들어주는데, 여기서 서로의 꼭지점이 연결되는 두 곳만 테두리를 만들어줍니다.
(①border-top, border-left ②border-top, border-right ③border-bottom, border-left ④border-bottom, border-right)
다음으로 기울이기(ratate) 코드를 이용해서 방향을 맞춰줍니다.

위쪽 방향

정사각형 테두리가 왼쪽과 아랫쪽만 지정되어있으므로, 기울기를 135deg로 돌려줍니다.
활용 예) footer부분에서 페이지 상단으로 이동할 때 많이 쓰입니다.

<div class="arrow01"></div>

.arrow01 {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-left: 15px solid #ffd67a;
    border-bottom: 15px solid #ffd67a;
    transform: rotate(135deg);
}

---

아랫쪽 방향

정사각형 테두리가 왼쪽과 아랫쪽만 지정되어있으므로, 기울기를 -45deg로 돌려줍니다.
활용 예) 아래로 이동할 때 많이 쓰입니다.

<div class="arrow02"></div>

.arrow02 {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-left: 15px solid #ffd67a;
    border-bottom: 15px solid #ffd67a;    
    transform: rotate(-45deg);
}

---

오른쪽 방향

정사각형 테두리가 왼쪽과 아랫쪽만 지정되어있으므로, 기울기를 -135deg로 돌려줍니다.
활용 예) 슬라이드의 next 버튼이나 다음페이지로 이동할 때 많이 쓰입니다.

<div class="arrow03"></div>

.arrow03 {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-left: 15px solid #ffd67a;
    border-bottom: 15px solid #ffd67a;
    transform: rotate(-135deg);
}

---

왼쪽 방향

정사각형 테두리가 왼쪽과 아랫쪽만 지정되어있으므로, 기울기를 45deg로 돌려줍니다.
활용 예) 슬라이드의 prev 버튼이나 뒤로가기로 이동할 때 많이 쓰입니다.

<div class="arrow04"></div>

.arrow04 {
    display: inline-block;
    width: 50px;
    height: 50px;
    border-left: 15px solid #ffd67a;
    border-bottom: 15px solid #ffd67a;    
    transform: rotate(45deg);
}

---

 

css로 삼각형 만들기 1

---

이 포스팅은 쿠팡 파트너스 활동의 일환으로 이에 따른 일정액을 수수료를 제공받고 있습니다