Trapezoid doesn't work with box-sizing:border-box;

[ricardozea]

Thanks for these awesome mixins!

I noticed that the Trapezoid doesn't work if you have the global rule for box-sizing: border-box;

So, for good measure in case someone has it declared in their stylesheet, I suggest you add box-sizing: content-box; to the Trapezoid's mixin.

Like this:

@mixin trapezoid($width, $color) {
    width: $width;
    height: 0;
    border-right: $width / 2 solid transparent;
    border-bottom: $width solid $color;
    border-left: $width / 2 solid transparent;
    box-sizing: content-box; 
}

See a demo of this issue here: http://jsfiddle.net/rzea/f3ELf/1/

Just uncomment the line with box-sizing: content-box; to see the Trapezoid work.

Disclaimer: I am not a Sass expert by any means so I'm not 100% sure this is the best way to solve this issue. If it is, awesome, if not and you have a better solution, great too.

Thanks,

[ilanbiala]

Welcome and thanks for the find!

Because of the effect box-sizing: border-box; (border width included in width), the $width / 2 isn't added on as it should be. So, I've played around and if box-sizing is set to border-box, then the width should be double ($width * 2) what the user provides to compensate. This will cause the trapezoid to be too big when box-sizing: border-box; is not applied however. I'm currently looking around for a way to check if a rule will be applied to a specific class so people will be able to choose what they would like to do in terms of box-sizing.

Let me know if you have any thoughts.

[ricardozea]

The level of complexity you may be able to achieve through an elaborate mixin isn't something I feel capable of doing since I'm far from being a web programmer.

The best suggestion I can provide at this point is what I mentioned in my example above, to include box-sizing: content-box; in the Trapezoid mixin. It's simple and straightforward because the Trapezoid will always display correctly regardless if the author declared box-sizing: border-box; or not.

[ilanbiala]

Maybe we can get some more opinions about this, so I'll leave it open for a few days.