.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でボーダーの間隔を指定する。 (正)
![CSSで斜めのボーダーをつくる - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/153c19e4823b0681f5e26fcde11c0c959b99542a/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9Q1NTJUUzJTgxJUE3JUU2JTk2JTlDJUUzJTgyJTgxJUUzJTgxJUFFJUUzJTgzJTlDJUUzJTgzJUJDJUUzJTgzJTgwJUUzJTgzJUJDJUUzJTgyJTkyJUUzJTgxJUE0JUUzJTgxJThGJUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz05YWRmY2QzYzNkMzg2YjUzM2FhMTMxOTVmZTVkZGM1NA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBubmlzaGltdXJhJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wOWE1NzQ3M2M3OTgyMTYyNzQwNTlmMmJkYjc2Njg4Ng%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D52c10a2082985ea8f6581abded698e95)