cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1><a href="http://clubmate.fi/css-beveled-corners-take-2-a-sass-mixin">IE8 beveled Corners Sass Mixin</a></h1>
<div class="module-6">
  This is the preset look. You have to add margin to the elements.
</div>
<div class="module">
  <p>You of course want to add little bit padding to the sides.</p>
  <p>
    This box doesn't have a width nor height. It should behave like any other block level element, almost.
  </p>
  <p>  
    You can't have border around the box.
  </p>
  <p>
    This is compatible with IE 8, yes! WIN! This uses no extra elements, or images and can be layed against a multicolor background as you see. How many wins that makes? At least 4.
  </p>
  <p>
    <strong>Beware</strong> that the margins can act really wackily when the boxes have different bevel radius. This is because of, complicated things.
  </p>
</div>

<div class="module-2">
  This is what happend if you don't apply margin to the element
</div>

<div class="module-3">
  This has width of <code>50%</code>. Also the upper element has no margin, looks weird like that.
</div>

<div class="module-4">
  <p>The corners can be controlled individually.</p>
  <p>Cool!</p>
</div>

<div class="module-5">
  <p>
    Try to set a margin to an element, it's a bit weird :( You have to add the bevel radiuses to it, if you want a top margin of <code>20px</code> and you have a box with bevel radius of <code>20px</code>, the margin needs to be <code>margin-top: 60px;</code>
  </p>
</div>
            
          
!
            
              @import "compass/css3";

/**
 * Beveled corner mixin
 *
 * Bevels corners of an element, in same fashion as border radius.
 * Compatable down to IE 9. Works like any other block level element (almost)
 *
 * Usage:
 * 
 * .module {
 *     @include border-bevel($background-color, $bevel-radius, $corner-top-left-bevel (boolean), $corner-top-right-bevel (boolean), $corner-bottom-right-bevel (boolean), $corner-bottom-left-bevel (boolean);
 * }
 *
 * The $corner-top-right-bevel etc. values are boolean values, true or false
 *
 * Limitations:
 *   + Can't have border around the box
 *   + All the corner bevel values must be same
 *   + IE 8 can't have margin in the last child element, padding is fine tho
 *
 * 
 * @author  Antti Hiljá http://clubmate.fi @hiljaa
 * @version 0.1
 * @link    http://clubmate.fi/css-beveled-corners-take-2-a-sass-mixin
 * @link    https://codepen.io/hilja/pen/rhlwG
 * 
 */

// Top belevels, trapezoid shapes
@mixin corner-top-left-bevel($corner-bevel, $background-color) {
    border-bottom-color: #{$background-color};
    border-width: 0 0 #{$corner-bevel} #{$corner-bevel};
}
@mixin corner-top-right-bevel($corner-bevel, $background-color) {
    border-bottom-color: #{$background-color};
    border-width: 0 #{$corner-bevel} #{$corner-bevel} 0;
}
@mixin corner-top-both-bevel($corner-bevel, $background-color) {
    border-bottom-color: #{$background-color};
    border-width: 0 #{$corner-bevel} #{$corner-bevel} #{$corner-bevel};
}

// Bottom belevels, trapezoid shapes
@mixin corner-bottom-right-bevel($corner-bevel, $background-color) {
    border-top-color: #{$background-color};
    border-width: #{$corner-bevel} #{$corner-bevel} 0 0;
}
@mixin corner-bottom-left-bevel($corner-bevel, $background-color) {
    border-top-color: #{$background-color};
    border-width: #{$corner-bevel} 0 0 #{$corner-bevel};
}
@mixin corner-bottom-both-bevel($corner-bevel, $background-color) {
    border-top-color: #{$background-color};
    border-width: #{$corner-bevel} #{$corner-bevel} 0 #{$corner-bevel};
}

// Square, when there is no bevel
@mixin corner-both-bevel-none($corner-bevel, $background-color) {
    background-color: #{$background-color};
    height: #{$corner-bevel};
}

@mixin corner-bevel-veryold (
    $background-color: unquote("#aaa"),
    $corner-bevel: 20px,
    $corner-top-left-bevel: true,
    $corner-top-right-bevel: true,
    $corner-bottom-right-bevel: true,
    $corner-bottom-left-bevel: true
    ) {
    background: #{$background-color};
    position: relative;
    height: 100%;
    &:before,
    &:after {
        border-color: transparent;
        box-sizing: border-box;
        border-style: solid;
        content: "";
        display: block;
        left: 0;
        position: absolute;
        width: 100%;
    }
    &:before {
        @if $corner-top-left-bevel == false and $corner-top-right-bevel == false {
            @include corner-both-bevel-none($corner-bevel, $background-color);
        } @else if $corner-top-left-bevel == true and $corner-top-right-bevel == true {
            @include corner-top-both-bevel($corner-bevel, $background-color);
        } @else if $corner-top-left-bevel == false {
            @include corner-top-right-bevel($corner-bevel, $background-color);
        } @else if $corner-top-left-bevel == true {
            @include corner-top-left-bevel($corner-bevel, $background-color);
        }
        top: -#{$corner-bevel};
    }
    &:after {
        @if $corner-bottom-left-bevel == false and $corner-bottom-right-bevel == false {
            @include corner-both-bevel-none($corner-bevel, $background-color);
        } @else if $corner-bottom-left-bevel == true and $corner-bottom-right-bevel == true {
            @include corner-bottom-both-bevel($corner-bevel, $background-color);
        } @else if $corner-bottom-left-bevel == false {
            @include corner-bottom-right-bevel($corner-bevel, $background-color);
        } @else if $corner-bottom-left-bevel == true {
            @include corner-bottom-left-bevel($corner-bevel, $background-color);
        }
        bottom: -#{$corner-bevel};
    }
    @content;
}


// Usage
.module {
  @include corner-bevel-veryold("MediumAquaMarine", 20px);
  // You have to have to add margin to the elements
  margin: 40px 0;
  padding: 0 20px;
}
.module-2 {
  @include corner-bevel-veryold( "Pink", 20px);
  padding: 0 20px;
  // No margin, looks weird
  //margin-bottom: 40px;
}
.module-3 {
  @include corner-bevel-veryold("LightBlue", 20px);
  margin-bottom: 40px;
  padding: 0 20px;
  width: 50%;
}
.module-4 {
  @include corner-bevel-veryold("LightCoral", 20px, true, false, true, false);
  margin-bottom: 40px;
  padding: 0 20px;
}
.module-5 {
  @include corner-bevel-veryold("LightSalmon", 20px);
  margin-top: 60px;
  padding: 0 20px;
}
.module-6 {
  @include corner-bevel-veryold();
  // You have to have to add margin to the elements
  margin: 40px 0;
}

// Elements inside the box
p {
  // Normal browsers can have margin in the elements
  margin: 0;
  // In IE 8 you can't have margin, use padding
  padding-bottom: 20px;
  // :last-child wont work in IE 8
  &:last-child {
    padding-bottom: 0;
  }
}

// Just reset / styling, ignore
body {
  background: url(http://hilja.net/i/tree_bark.png);
  padding: 25px;
}
h1 {
  margin: 0 0 20px 0;
}
a {
  color: #333;
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console