src/resources/themes/vendor/compass-recipes/stylesheets/recipes/shape/polygon/_octagon.scss

   1 /**
   2  * Shape/Polygon/Octagon
   3  *
   4  * @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
   5  */
   6
   7 //Don't ask me when the coefficient cames from... I just compute then from original code by @chriscoyier
   8 @mixin octagon($width: 100px, $height: 100px, $background-color: transparent)
   9 {
  10     width: $width;
  11     height: $height*0.42;
  12     background: $background-color;
  13     position: relative;
  14
  15     &:before,
  16     &:after
  17     {
  18         content: "";
  19         position: absolute;
  20         left: 0;
  21
  22         width: $width*0.42;
  23         height: 0;
  24
  25         border-left: $width*0.29 solid transparent;
  26         border-right: $width*0.29 solid transparent;
  27
  28     }
  29
  30         &:before
  31         {
  32             top: -$height*0.29;
  33             border-bottom: $height*0.29 solid $background-color;
  34         }
  35
  36         &:after
  37         {
  38             bottom: -$height*0.29;
  39             border-top: $height*0.29 solid $background-color;
  40         }
  41 }