css로 화살표, 삼각형 기호 만들기

화살표 만들기

 

<span class="arrow-prev">이전 화살표</span>
<span class="arrow-next">다음 화살표</sapn>

.arrow-prev {
    position: relative;
    
}
.arrow-prev:before {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 50px; //화살표 크기
    height: 50px; //화살표 크기
    border-top: 5px solid #000; //화살표 선
    border-right: 5px solid #000; //화살표 선
    
}

 

방법

1. 화살표를 넣을 태그에 가상선택자를 사용하여 만듬
2. width height로 화살표의 크기를 정해줌
3. border로 화살표 선을 만들어줌
4. 원하는 모양으로 방향을 돌려줌

 

 

여기서 < > 이런 모양의 화살표를 만들어주려면 화살표를 돌려주면 된다 !

즉, transform: rotate();를 사용하여 화살표를 원하는만큼 돌리면 된다.

 

.arrow-prev {
    position: relative;
    
}
.arrow-prev:before {
    position: absolute;
    left: 0;
    top: 0;
    content: '';
    width: 50px; //화살표 크기
    height: 50px; //화살표 크기
    border-top: 5px solid #000; //화살표 선
    border-right: 5px solid #000; //화살표 선
    transform: rotate(45deg); //다음 화살표
    /*transform: rotate(225deg); 이전 화살표*/
    
}

 

다음 화살표

다음 화살표는 trasform: rotate(45deg);

 

이전 화살표

이전 화살표는 transform: rotate(225deg);

 

이런식으로 방향을 돌려주면 화살표 완성이다.

---

삼각형 만들기

<div class="box"></div>

.box {
    width: 0;
    height: 0;
    border-top: 50px solid mediumturquoise;
    border-bottom: 50px solid navajowhite;
    border-right: 50px solid pink;
    border-left: 50px solid cornflowerblue;
    
}

 

방법

1. width height 모두 0
2. border를 원하는 크기만큼 적용
3. 원하는 삼격형을 제외하고 나머지 border은 투명처리

삼각형을 만들기 위한 기본 구조를 설명하기 위해 우선 border 모두를 보이게 만들었다.

여기서 원하는 삼각형을 빼고 나머지 border을 투명처리하면 된다.

 

왼쪽 화살표를 만들기위해서는 border-left를 제외하고 나머지 border를 모두 trasparent 처리 해주었다.

.box {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 50px solid transparent;
    border-left: 50px solid cornflowerblue;
    
}