Skip to content

Instantly share code, notes, and snippets.

@oobleck
Last active August 29, 2015 13:55
Show Gist options
  • Select an option

  • Save oobleck/8718497 to your computer and use it in GitHub Desktop.

Select an option

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
Copy Markdown
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
Copy Markdown
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