CSS 소단원 단추의 삼각형 표기 만드는 방법

처음 스마트폰 사이트를 만들 때는 메뉴와 버튼에 삼각형을 많이 사용했지만 서버를 위해 최대한 덜어주고 싶어서 이미지를 쓰지 않고 CSS로 할 수 없는 시행착오의 결과를 소개한다.

.icon-button {
    width: 44px;
    height: 44px;
    border: solid 1px #000;
    border-radius: 3px;
}
.clearfix:after {
    display: block;
    clear: both;
    content: "";
}
.arrow-r:before,
.arrow-b:before,
.arrow-l:before,
.arrow-t:before {
    position: relative;
    display: block;
    margin: auto;
    top: 50%;
    width: 0px;
    height: 0px;
    border: 11px solid transparent;
    border-right-color: #666;
    border-top-color: #666;
    content: "";
}
.arrow-r:before {
    margin-left: 12%;
    margin-top: -24%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.arrow-b:before {
    margin-left: 24%;
    margin-top: -36%;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}
.arrow-l:before {
    margin-left: 36%;
    margin-top: -24%;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}
.arrow-t:before {
    margin-left: 24%;
    margin-top: -12%;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
}

<ul class="sample-buttons clearfix">
  <li><div class="icon-button arrow-l"></div></li>
  <li><div class="icon-button arrow-r"></div></li>
  <li><div class="icon-button arrow-t"></div></li>
  <li><div class="icon-button arrow-b"></div></li>
</ul>

버튼에 0 크기 블록 요소를 만들고 버튼에 굵은 경계선을 추가하여 삼각형으로 설정합니다.
버튼과 삼각형의 사이즈가 4:1이 되면 아무거나 상관없을 거예요.
음, CSS의 분반, 이런 느낌 괜찮아요?
이상한 점이 있으면 토로(o*.)o캬캬
이렇게 작은 CSS도 1시간가량 가볍게 걸릴 수 있어 입구는 간단해 보이지만 열심히 하면 어렵다.
할 때 반에서 많이 늘었어요. 머리도 펑크났어요.ω・`)