Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
cssで斜め縞(diagonal-stripes)
@mixin background-linear-gradient($value...){
background: -moz-linear-gradient($value);
background: -webkit-linear-gradient($value);
background: linear-gradient($value);
}
@mixin background-size($value...){
-moz-background-size: $value;
-webkit-background-size: $value;
background-size: $value;
}
@mixin diagonal-stripes-leftTop($width: 100px, $height: 100px, $color1: black, $color2: white, $sima_num: 5){
width: $width;
height: $height;
@include background-linear-gradient(
left top,
$color1, $color1 25%,
$color2 25%, $color2 50%,
$color1 50%, $color1 75%,
$color2 75%, $color2);
@include background-size(($width/$sima_num*2) ($height/$sima_num*2));
}
@mixin diagonal-stripes-rightTop($width: 100px, $height: 100px, $color1: black, $color2: white, $sima_num: 5){
width: $width;
height: $height;
@include background-linear-gradient(
right top,
$color1, $color1 25%,
$color2 25%, $color2 50%,
$color1 50%, $color1 75%,
$color2 75%, $color2);
@include background-size(($width/$sima_num*2) ($height/$sima_num*2));
}
.diagonal-stripes-leftTop {
$width: 100px;
$height: 100px;
$color1: white;
$color2: black;
$num: 5;
@include diagonal-stripes-leftTop($width, $height, $color1, $color2, $num);
}
.diagonal-stripes-rightTop {
$width: 100px;
$height: 100px;
$color1: black;
$color2: white;
$num: 5;
@include diagonal-stripes-rightTop($width, $height, $color1, $color2, $num);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment