Skip to content

Instantly share code, notes, and snippets.

@yanatan16

yanatan16/README.md

Last active December 17, 2015 18:29
Show Gist options
  • Save yanatan16/5653535 to your computer and use it in GitHub Desktop.
Save yanatan16/5653535 to your computer and use it in GitHub Desktop.
Download ZIP
A Sass partial to create diagonal lines
Raw
README.md

Diagonal Lines in Sass

You can use _diagonal-line.scss to create arbitrary diagonal lines using CSS3. This implementation is compatible with all major browsers and IE9 or greater. An example usage of this partial is given in lines.scss. The compiled css file was included for display purposes.

Usage

To compile the sass file, you will need to use the additional functions provided in math.rb:

sass --watch path/to/sass:path/to/css -r ./math.rb

File List

  • _diagonal-line.scss Sass partial to create diagonal lines
  • math.rb Required extra math functions for sass
  • _transforms.scss Sass partial to do cross-browser css3 transforms
  • lines.scss Example usage of _diagonal-line.scss
  • index.html Demo html
  • lines.css Precompiled CSS via sass -r math.rb

Thanks to

Raw
_diagonal-line.scss
//_diagonal-line.scss cross-browser compatible diagonal lines
@include "transforms";
// Creates a line segment with start and end points
@mixin diagonal-line2($x0, $y0, $x1, $y1) {
position: absolute;
left: #{$x0}px;
top: #{-$y0}px;
margin-top: 0px; // Reset hr's default styles
$x: $x1 - $x0;
$y: $y1 - $y0;
@include transform-rotate(#{-1 * atan2($x, $y)});
width: #{sqrt($x * $x + $y * $y)}px;
}
// Creates a line segment starting at 0, 0
@mixin diagonal-line($x, $y) {
@include diagonal-line2(0, 0, $x, $y);
}
Raw
_transforms.scss
//_transforms.css cross-browser compatible transform css3
// Cross-browser transform
@mixin transform($arg) {
transform: $arg;
-webkit-transform: $arg;
-ms-transform: $arg;
-moz-transform: $arg;
-o-transform: $arg;
}
// Cross-browser transform-origin
@mixin transform-origin($arg) {
transform-origin: #{$arg};
-webkit-transform-origin: #{$arg};
-ms-transform-origin: #{$arg};
-moz-transform-origin: #{$arg};
-o-transform-origin: #{$arg};
}
// Cross-browser rotate transform about origin
@mixin transform-rotate($degs) {
// rotate is more accurate than matrix it seems
@include transform(rotate(#{$degs}rad));
@include transform-origin(0% 0%);
}
Raw
index.html
<html>
<head>
<meta charset="UTF-8" />
<title>Diagonal Lines Demo</title>
<link rel="stylesheet" type="text/css" href="lines.css" />
</head>
<body>
<hr class="line-0" />
<hr class="line-1" />
<hr class="line-2" />
<div class="spot-0"></div>
<div class="spot-1"></div>
<div class="spot-2"></div>
</body>
</html>
Raw
lines.css
hr.line-0 {
position: absolute;
left: 0px;
top: 0px;
margin-top: 0px;
transform: rotate(0.38051rad);
-webkit-transform: rotate(0.38051rad);
-ms-transform: rotate(0.38051rad);
-moz-transform: rotate(0.38051rad);
-o-transform: rotate(0.38051rad);
transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
width: 53.85165px; }
hr.line-1 {
position: absolute;
left: 50px;
top: 20px;
margin-top: 0px;
transform: rotate(0.7854rad);
-webkit-transform: rotate(0.7854rad);
-ms-transform: rotate(0.7854rad);
-moz-transform: rotate(0.7854rad);
-o-transform: rotate(0.7854rad);
transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
width: 70.71068px; }
hr.line-2 {
position: absolute;
left: 100px;
top: 70px;
margin-top: 0px;
transform: rotate(-0.61073rad);
-webkit-transform: rotate(-0.61073rad);
-ms-transform: rotate(-0.61073rad);
-moz-transform: rotate(-0.61073rad);
-o-transform: rotate(-0.61073rad);
transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
width: 122.06556px; }
div {
position: absolute;
width: 4px;
height: 4px;
background-color: red;
display: block;
line-height: 4px; }
div.spot-0 {
top: 18px;
left: 48px; }
div.spot-1 {
top: 68px;
left: 98px; }
div.spot-2 {
top: -2px;
left: 198px; }
Raw
lines.scss
// lines.scss Styling for diagonal lines demo
@include "diagonal-line"
hr {
&.line-0 {
@include diagonal(50, -20);
}
&.line-1 {
@include diagonal2(50, -20, 100, -70);
}
&.line-2 {
@include diagonal2(100, -70, 200, 0);
}
}
div {
position: absolute;
width: 4px;
height: 4px;
background-color: red;
display: block;
line-height: 4px;
&.spot-0 {
top: 18px;
left: 48px;
}
&.spot-1 {
top: 68px;
left: 98px;
}
&.spot-2 {
top: -2px;
left: 198px;
}
}
Raw
math.rb
# math_sass.rb
require 'sass'
def sassfn(*args, &block)
Sass::Script::Parser.parse(yield.to_s, 0, 0)
end
module Sass::Script::Functions
def sin(rad)
sassfn { Math.sin(rad.value.to_f) }
end
def cos(rad)
sassfn { Math.cos(rad.value.to_f) }
end
def atan2(x, y)
sassfn { Math.atan2(y.value.to_f, x.value.to_f) }
end
def sqrt(x)
sassfn { Math.sqrt(x.value.to_f) }
end
declare :sin, :args => [:float]
declare :cos, :args => [:float]
declare :atan2, :args => [:float, :float]
declare :sqrt, :args => [:float]
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment