Skip to content

Instantly share code, notes, and snippets.

@oobleck
Last active August 29, 2015 13:55
Show Gist options
  • Save oobleck/8718497 to your computer and use it in GitHub Desktop.
Save oobleck/8718497 to your computer and use it in GitHub Desktop.
Simple CSS-only corner sash/ribbon. Works down to IE8.
<div class="box">
<p>The <kbd>.stash</kbd> element creates the bounding box that aligns in the corner and crops the contents at an angle. The <kbd>.sash > span</kbd> gets sized and rotated.</p>
<span class="sash">
<span>New!</span>
</span>
</div>
@mixin _rotate($deg: -45, $display: block) {
$matrix: (cos($deg) -1*sin($deg) sin($deg) cos($deg));
display: $display;
@include rotate(#{$deg}deg);
@include transform-origin(center, bottom, 0, false);
.no-csstransforms & {
// http://stackoverflow.com/questions/5669489/create-a-cross-browser-mixin-for-transform-rotate
// http://www.useragentman.com/IETransformsTranslator/
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=#{nth($matrix, 1)}, M12=#{nth($matrix, 2)}, M21=#{nth($matrix, 3)}, M22=#{nth($matrix, 4)}, SizingMethod='auto expand')";
margin: 0 0 0 0;
}
}
.sash {
$padding: baseline(1);
$height: (1.5 * $em-base) + ($padding * 2);
$hypot: 1.42;
$bgColor: #8BBDF7;
$bgShade: shade($bgColor, 12%);
$overhang: -1px;
$width: 6.5em;
position: absolute;
z-index: 50;
top: $overhang;
left: $overhang;
width: $width;
height: $width;
overflow: hidden;
span {
@include _rotate(-45deg);
@include background(linear-gradient(left, $bgShade, $bgColor, $bgShade));
@include rem(font-size, 0.9rem);
@include box-shadow(0 1px 4px 0 rgba($black, 0.5));
position: absolute;
background: $bgColor;
padding: $padding;
text-align: center;
font-weight: $font-weight-bold;
line-height: 1.5;
color: $white;
display: block;
width: 100% * $hypot;
bottom: 51%;
left: -21%;
}
.no-csstransforms & {
span {
left: -24%;
bottom: 90%;
border-bottom: 1px solid #888;
}
}
}
// Demo css
.box {
background: #ddd;
position: relative;
padding: 1em;
margin: 1em;
}
@oobleck
Copy link
Author

oobleck commented Jan 30, 2014

Not fully tested in IE yet, but the arbitrary rotation does work in IE8. Just need to adjust the math.

@oobleck
Copy link
Author

oobleck commented Jan 31, 2014

Still to test:

  • IE9-11

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment