[코피페로 즉시 사용할 수 있음] CSS만으로 만든 삼각형 화살표 버튼

CSS만으로 버튼을 만들 때 여러분은 어떻게 만들고 있습니까?

이번에는 CSS로 삼각형의 위쪽 및 아래쪽 화살표 버튼을 만드는 방법을 소개하고 싶습니다!
아래의 사진이, 지금부터 제작하는 화살표 버튼의 브라우저로의 표시가 됩니다.


그럼 바로 HTML과 CSS를 살펴 보겠습니다!
다음은 HTML입니다.

<div class="upward"></div>
<div class="downward"></div>

다음은 CSS입니다.

.upward{
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
    margin-left: 30px;
}
.upward::before,.upward::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.upward::before{
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1px solid blue;
    background-color: blue;
    border-radius: 25%;
}
.upward::after{
    margin-left: 4.5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 8.7px 5px;
    border-color: transparent transparent #ffffff transparent;
}
.downward{
    margin: 0 20px 0 8px;
    position: relative;
    display: inline-block;
    padding: 0 0 0 16px;
    color: #000;
    vertical-align: middle;
    text-decoration: none;
    font-size: 15px;
}
.downward::before,.downward::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.downward::before{
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    border: 1px solid  blue;
    background-color:  blue;
    border-radius: 25%;
}
.downward::after{
    margin-left: 4.5px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8.7px 5px 0 5px;
    border-color: #ffffff transparent transparent transparent;

}

해설

.upward::before, .downward::before 부분이 사각형의 외부 테두리입니다.
→사각형의 색・크기를 바꿀 때는, 여기를 만지십시오.

.upward::after, .downward::after 부분은 화살표입니다.
→화살표의 크기, 방향을 바꿀 때는 이 .upward::after나 .downward::after를 바꿀 필요가 있습니다.

CSS 삼각형 작성 도구
htp : // 어 ps. 에 ky. hk / cs-t 리안 g ㅇ 게네라와 r /

이 삼각형 작성 툴이, 꽤 추천으로, 이 작성 툴로, 화살표의 방향·색·크기등을 지정할 수 있습니다.
여기에서 만든 것을 .upward::after나 .downward::after에 붙여 넣으면, 자신이 좋아하는 색·방향으로, 화살표를 작성할 수 있습니다.
제 경우에는 붙여넣기만 하면 화살표가 중간에 오지 않기 때문에 margin-left로 중간에 오도록 조정하고 있습니다.