CSS로 경사

CSS only로 버튼이 있는 이런 상황을 만들고 싶어요.
적용linear-gradient.

button.css

.button{
    background: repeating-linear-gradient(45deg, #145e99, #145e99 10px, #088eb6 10px, #088eb6 20px);
}

치수를 지정하는 것은 이렇다는 뜻이다.0px~10px는 짙은 남색(#145e99), 10px~20px는 옅은 남색(#088eb6)이다.
45deg를 90deg 또는 180deg로 설정하면 경계의 방향을 변경할 수 있습니다.

경계가 1px일 때/간격 편차가 발생할 때

다음 그림과 같이 background-size로 경계의 간격을 지정합니다.

(바른)
button.css

.button{
    background-image: linear-gradient(-45deg, #145e99 25%, #088eb6 25%, #088eb6 50%, #145e99 50%, #145e99 75%, #088eb6 75%, #088eb6);
    background-size: 4px 4px;
}

이렇게 하면 끝수가 나타나지 않고 등거리의 경계를 형성할 수 있다.

참고 자료

https://css-tricks.com/stripes-css/
http://stackoverflow.com/questions/23878398/diagonal-stripes-in-css-that-are-1px-wide