CSS beveled corners, take 2: a Sass Mixin
I refined the beveled corners method I posted about earlier. This includes a bunch os Sass mixins that do all the dirty work for you.
So, a beveled corner, a corner cut out of a box. So simple, yet so complex. With these three Sass mixins doing them is quit easy.
Here’s some requirements we want our mixins to fill:
corner-bevel-veryold()
works in IE8corner-bevel-old()
works in IE9corner-bevel-new()
works in IE10- The beveled box needs to act like a normal div (it almost does)
- No extra elements
- No JS, images, Data URIs or other crap
- Can be used against a multicoloured background
- As easy to use as
border-radius
The corner-bevel-veryold()
mixin
This supports IE8, the horizontal margins a bit wacky but it does the job if you really need to support that.
Here’s the logic:
(Check out a selection of trapezoids that you can create with css.)
Demo
See the Pen rhlwG by hilja (@hilja) on CodePen
Basic usage
.module {
@include corner-bevel();
}
This results in a box with 20px
bevel and grey background.
Configurable arguments
@mixin corner-bevel-veryold (
$background-color: unquote("#aaa"), // Background color, default `#aaa`
$corner-bevel: 20px, // Bevel amount, default 20px
$corner-top-left-bevel: true, // Boolean, false = sharp corner
$corner-top-right-bevel: true, // Boolean, false = sharp corner
$corner-bottom-right-bevel: true, // Boolean, false = sharp corner
$corner-bottom-left-bevel: true // Boolean, false = sharp corner
)
All together:
.module {
@include border-bevel("LightCoral", 20, true, false, false, false);
}
Other styling can of course be added in normal fashion.
.module {
@include border-bevel("LightCoral", 20, true, false, false, true);
display: inline;
padding: 0 20px;
}
Limitations
- Margins are a bit funny. You have to add the bevel height to it
- Can’t have border around the box
- In IE8, you can’t have margin in the last child element, use padding (see image below). Ironically, IE8 doesn’t support
:last-child
pseudo class - You can’t have top right bevel being
20px
and top left being10px
, all bevels need to be the same amount (what you can do is to turn off each bevel)
The corner-bevel-old()
mixin
This works pretty much the same as the before mentioned mixin. Difference being that you don’t need to mess with the margins, the element height includes the bevels. It works down to IE9.
The logic:
Configurable arguments
@mixin corner-bevel-old (
$background-color: unquote("#aaa"), // Background color, default `#aaa`
$corner-bevel: 20px, // Bevel amount, default 20px
$corner-top-left-bevel: true, // Boolean, false = sharp corner
$corner-top-right-bevel: true, // Boolean, false = sharp corner
$corner-bottom-right-bevel: true, // Boolean, false = sharp corner
$corner-bottom-left-bevel: true // Boolean, false = sharp corner
)
Basic usage
.module {
@include corner-bevel();
// Apply padding and other styling to your liking
padding: 0 20px;
}
Limitations
- Can’t have border around the box
- You can’t have top right bevel being
20px
and top left being10px
, all bevels need to be the same amount (what you can do is to turn off each bevel)
The corner-bevel-new()
mixin
This is the best and shortest of these, downside being it uses the CSS gradients, that are not super widely supported. This technique was invented by Lea Verou.
The logic is thus:
Demo
See the Pen wnoEk by hilja (@hilja) on CodePen
Configurable arguments
@mixin corner-bevel-new (
$background-color: #aaa, // Background color, default `#aaa`
$corner-top-left-bevel: 10px, // Top left corner bevel amount
$corner-top-right-bevel: 10px, // Top right bevel amount bevel amount
$corner-bottom-right-bevel: 10px, // Bottom right corner bevel amount
$corner-bottom-left-bevel: 10px // Bottom left corner bevel amount
)
Basic usage
.module {
@include corner-bevel-new();
}
Different bevels amounts on each corner:
.module {
@include corner-bevel-new(#888, 0px, 20px, 40px, 60px);
}
Limitations
- Again, can’t have border around the box
- Chrome has a small rendering bug That’s why I’ve set the background to
50.5%
rather than50%
:background-size: 50.5% 50%;
ToDo
- Perhaps make it a Compass extension
Comments
Thanks very much for this – it was very useful.
One thing i did notice was that the “px” was being omitted from your code on output, but it’s an easy fix.
Cheers
Thanks for the feedback. I’m just working on a new version of this.