css 삼각형 그리기

삼각형을 그릴때는 border와 border 사이의 경계선으로 만들 수 있습니다.

border가 다른 방향의 border를 만났을때 끝 부분을 확대해서 보면 삼각형 모양으로 끝납니다.

이렇게 삼각형 모양이 나옵니다.

그래서 삼각형 모양을 표시할 부분만 놔두고 나머지는 투명처리를 해서 만들 수 있습니다.

 

html

<span class="link"><a href="#none" class="btn">Triangle</a></span>

css

.link .btn {
    position: relative;
    display: block;
    padding: 0 3rem 0 0;
    color: #5C5C5C;
    font-size: 14px;
    width:30px;
}
.link .btn:after {
    content: '';
    position: absolute;
    right:0;
    top: 50%;
    display: block;
    transform: translateY(-30%) rotate(180deg);
    width: 0;
    height: 0;
    border-bottom: 10px solid #5C5C5C;
    border-left: 6.5px solid transparent;
    border-right: 6.5px solid transparent;
}

 

 

See the Pen Untitled by kim oya (@ttuttu) on CodePen.