# 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.

- Original beveled corner
  [article](http://clubmate.fi/css-beveled-corners/ 'CSS beveled corners').
- [Download](https://github.com/hilja/beveled-corners) the mixin from GitHub

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 IE8* `corner-bevel-old()` works in IE9*
  `corner-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:

![Example showing beveled corners in CSS](/images/bevel_01.png)

(Check out a
[selection of trapezoids](http://clubmate.fi/different-trapezoid-shapes-with-css/ 'Different trapezoid shapes with CSS')
that you can create with css.)

### Demo

[CodePen](https://codepen.io/hilja/pen/rhlwG)

### Basic usage

```scss
.module {
  @include corner-bevel();
}
```

This results in a box with `20px` bevel and grey background.

### Configurable arguments

```scss
@mixin corner-bevel-veryold(
  $background-color: unquote('#aaa'),
  // Background color, default `#aaa
  $corner-bevel: 20px,
  // Bevel amount, default 20p
  $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 corne
);
```

All together:

```scss
.module {
  @include border-bevel('LightCoral', 20, true, false, false, false);
}
```

Other styling can of course be added in normal fashion.

```scss
.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 being `10px`, all
  bevels need to be the same amount (what you can do is to turn off each bevel)

![Example showing beveled corners in CSS](/images/margin-dilemma.png)

## 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:

![Example showing beveled corners in CSS](/images/bevel_03.png)

### Configurable arguments

```scss
@mixin corner-bevel-old(
  $background-color: unquote('#aaa'),
  // Background color, default `#aaa
  $corner-bevel: 20px,
  // Bevel amount, default 20p
  $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

```scss
.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 being `10px`, 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](http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/).

The logic is thus:

![](/images/bevel_06.png)

### Demo

[CodePen](https://codepen.io/hilja/pen/wnoEk)

### Configurable arguments

```scss
@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

```scss
.module {
  @include corner-bevel-new();
}
```

Different bevels amounts on each corner:

```scss
.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
  ![Chrome bug](/images/beveled-corner-weirdnes.png) That’s why
  I’ve set the background to `50.5%` rather than `50%`: `background-size: 50.5%
  50%;`