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
Author And Source
この問題について(CSSで斜めのボーダーをつくる), 我々は、より多くの情報をここで見つけました https://qiita.com/nnishimura/items/993280c9503b57ad63f6著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .