octocatstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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.

            
              <!-- CSS3-only Hexagons Shapes using COMPASS/SCSS.
Code derived from article 
http://www.queness.com/post/13901/create-beautiful-hexagon-shapes-with-pure-css3 
by Kevin Liew.
See CSS code comments for customization
-->
  <div class="hex hex-1 hex-gap">		
		<div class="inner">
				<h4>HOME</h4>
				<hr />
				<p>Home Sweet Home</p>
		</div>		
		<a href="#"></a>
		<div class="corner-1"></div>
		<div class="corner-2"></div>		
	</div>
	
	<div class="hex hex-2">		
		<div class="inner">
				<h4>ABOUT US</h4>
				<hr />
				<p>We Are The Experts</p>
		</div>		
		<a href="#"></a>
		<div class="corner-1"></div>
		<div class="corner-2"></div>		
	</div>


	<div class="hex hex-3">		
		<div class="inner">
				<h4>CONTACT US</h4>
				<hr />
				<p>We Open Everyday</p>
		</div>		
		<a href="#"></a>
		<div class="corner-1"></div>
		<div class="corner-2"></div>		
	</div>	
	
	<div class="hex" style="background-image: url(http://drupal.org/files/druplicon.small_.png)">		
		<a href="#"></a>		
		<div class="corner-1"></div>
		<div class="corner-2"></div>		
	</div>
	
	<div class="hex" style="background-image: url(http://www.w3.org/html/logo/downloads/HTML5_Badge_256.png)">		
		<a href="#"></a>
		<div class="corner-1"></div>
		<div class="corner-2"></div>		
	</div>
	
	<div class="hex" style="background-image: url(http://www.w3.org/Icons/WWW/w3c_home_nb-v.svg)">		
		<a href="#"></a>		
		<div class="corner-1"></div>
		<div class="corner-2"></div>		
	</div>
	
	<div class="hex" style="background-image: url(http://www.thesupercars.org/wp-content/uploads/2008/08/porsche-boxster-s-design-edition-2-thumbnail.jpg)">		
		<a href="#"></a>		
		<div class="corner-1"></div>
		<div class="corner-2"></div>		
	</div>
	
	<div class="hex" style="background-image: url(http://images.thecarconnection.com/lrg/2009_bmw_m3_convertible_100026450_l.jpg)">		
		<a href="#"></a>		
		<div class="corner-1"></div>
		<div class="corner-2"></div>		
	</div>
	
	<div class="hex" style="background-image: url(http://www.diariomotor.com/imagenes/bmw-m3-convertible-2009-1.jpg)">		
		<a href="#"></a>		
		<div class="corner-1"></div>
		<div class="corner-2"></div>		
	</div>

		<div class="hex" style="background-image: url(http://www.w3.org/Icons/SVG/svg-logo-v.png)">		
		<a href="#"></a>		
		<div class="corner-1"></div>
		<div class="corner-2"></div>		
	</div>

	<div class="hex" style="background-image: url(http://www.w3.org/2005/11/MWI-Icons/mobileOK.png)">		
		<a href="#"></a>	
		<div class="corner-1"></div>
		<div class="corner-2"></div>		
	</div>


            
          
!
            
              @import "compass/css3";

/* CSS3-only Hexagons Shapes using COMPASS/SCSS.
Code derived from article 
http://www.queness.com/post/13901/create-beautiful-hexagon-shapes-with-pure-css3 
by Kevin Liew.

* The code shows the use of text, images and SVG inside CSS3 hexagons.
* Hexagons are scalable just modifying a SCSS variable.
* Simple hover behavior is included
* @TODO: Hexagons layout adapts to parent region dimensions, but the first hexagon of each "row" should include the class 'hex-gap' to fit in properly. This feature will need some Javascript, not included in this example.

* For not SCSS/COMPASS users, plain CSS3 code is attached at the end of this file.
*/

/* Customization vars */
$hexagon_scale: 1.2;      // Change this to resize the hexagons
$images_scale: 0.7;       // Change this to resize images inside hexagons
$pad-vertical: 5px;         // Vertical   pad between hexagons. Should be >=0
$pad-horizontal: 5px;       // Horizontal pad between hexagons. Should be >=0
$border-width: 1px;         // Hexagons borders parameters
$border-style: solid;
$border-color: black;

/* Not changes needed from here */
$hexagon_base_width: 150px;
$hexagon_width:       $hexagon_scale*$hexagon_base_width;
$hexagon_height:      $hexagon_width/1.73205;               // h=w/sqrt(3)                     
$hexagon_margin_v:    $hexagon_scale*21px+$pad-vertical;    // minimum 21px to avoid hexagons overlap
$hexagon_margin_h:    $pad-horizontal;          

.hex {
  width:$hexagon_width;
  height:$hexagon_height;
  background-color: white;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  @include background-size(auto $hexagon_width*$images_scale);    
  position: relative;
  float:left;
  margin-top: $hexagon_margin_v*$hexagon_scale;
  margin-right: $hexagon_margin_h*$hexagon_scale;
  margin-bottom: $hexagon_margin_v*$hexagon_scale;
  margin-left: $hexagon_margin_h*$hexagon_scale;
  text-align:center;
  zoom:1;
  border-right: $border-width $border-style $border-color;
  border-left: $border-width $border-style $border-color;

  /* The class 'hex-gap' should be included in the 1st hexagon
  of each line, for avoiding overlaps between hexagon lines */
  /* Some Javascript code (not included in this example) 
  would be needed to change the DOM dinamically*/
  &.hex-gap {
    margin-left: $hexagon_height;
  }
  &:hover {
    cursor: pointer;
    opacity:0.5;
       @include box-shadow(red 2px 2px 10px);
  }
  a {
    display:block;
    width: 100%;
    height:100%;
    text-indent:-9999em;
    position:absolute;
    top:0;
    left:0;
  }

  .corner-1,
  .corner-2 {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: inherit;                
    z-index:-2;
    border-right: $border-width $border-style $border-color;
  border-left: $border-width $border-style $border-color;
    overflow:hidden;
    @include backface-visibility(hidden);
     
    &:before {
        width:  $hexagon_scale*173px;  // scale * 100 * sqrt(3)
        height: $hexagon_scale*173px;  // scale * 100 * sqrt(3) 
        content: '';
        position: absolute;
        background: inherit;
        top:0;
        left: 0;
        z-index: 1;
        background: inherit;
        background-repeat: no-repeat;
        @include backface-visibility(hidden);          
    }
  }

  .corner-1 {
    z-index:-1;
    @include transform(rotate(60deg));
    &:before {
        @include transform(rotate(-60deg) translate(-$hexagon_height, 0px));
        @include transform-origin(0,0);
    }
  }

  .corner-2 {
    @include transform(rotate(-60deg));
    &:before {
        @include transform(rotate(60deg) 
                           translate((-$hexagon_height/2)+0px, 
                                      (-2-$hexagon_scale*2*$hexagon_margin_h)+0px)); 
        bottom: 0;
    }
  }

  /* Custom styles*/
  .inner {   
    color: #333;
  }
  
  h4 {
    font-family: 'Josefin Sans', sans-serif; 
    font-size: $hexagon_scale*1.2em;
    margin:0;     
  }
  
  hr {
    width:60%;
    border:0;
    border-top:3px solid #eee;
    margin: $hexagon_scale*10px auto;
  }
  
  p {
    font-size: $hexagon_scale*1em;
    font-family: 'Kotta One', serif;
    width:80%;
    margin:0 auto;
  }

  &.hex-1 {
    background: #74cddb;
  }
  
  &.hex-2 {
    background: #f5c53c;
  }
  
  &.hex-3 {
    background: #80b971;
  }
}

/* SASS/COMPASS CSS OUTPUT:
.hex {
  width: 180px;
  height: 103.9231px;
  background-color: white;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-background-size: auto 126.0px;
  -moz-background-size: auto 126.0px;
  -o-background-size: auto 126.0px;
  background-size: auto 126.0px;
  position: relative;
  float: left;
  margin-top: 36.24px;
  margin-right: 6px;
  margin-bottom: 36.24px;
  margin-left: 6px;
  text-align: center;
  zoom: 1;
  border-right: 1px solid black;
  border-left: 1px solid black;
}

.hex.hex-gap {
  margin-left: 103.9231px;
}

.hex:hover {
  cursor: pointer;
  opacity: 0.5;
  -webkit-box-shadow: red 2px 2px 10px;
  -moz-box-shadow: red 2px 2px 10px;
  box-shadow: red 2px 2px 10px;
}

.hex a {
  display: block;
  width: 100%;
  height: 100%;
  text-indent: -9999em;
  position: absolute;
  top: 0;
  left: 0;
}

.hex .corner-1,
.hex .corner-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  z-index: -2;
  border-right: 1px solid black;
  border-left: 1px solid black;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hex .corner-1:before,
.hex .corner-2:before {
  width: 207.6px;
  height: 207.6px;
  content: '';
  position: absolute;
  background: inherit;
  top: 0;
  left: 0;
  z-index: 1;
  background: inherit;
  background-repeat: no-repeat;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}

.hex .corner-1 {
  z-index: -1;
  -webkit-transform: rotate(60deg);
  -moz-transform: rotate(60deg);
  -ms-transform: rotate(60deg);
  -o-transform: rotate(60deg);
  transform: rotate(60deg);
}

.hex .corner-1:before {
  -webkit-transform: rotate(-60deg) translate(-103.9231px, 0px);
  -moz-transform: rotate(-60deg) translate(-103.9231px, 0px);
  -ms-transform: rotate(-60deg) translate(-103.9231px, 0px);
  -o-transform: rotate(-60deg) translate(-103.9231px, 0px);
  transform: rotate(-60deg) translate(-103.9231px, 0px);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
}

.hex .corner-2 {
  -webkit-transform: rotate(-60deg);
  -moz-transform: rotate(-60deg);
  -ms-transform: rotate(-60deg);
  -o-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

.hex .corner-2:before {
  -webkit-transform: rotate(60deg) translate(-51.96155px, -14px);
  -moz-transform: rotate(60deg) translate(-51.96155px, -14px);
  -ms-transform: rotate(60deg) translate(-51.96155px, -14px);
  -o-transform: rotate(60deg) translate(-51.96155px, -14px);
  transform: rotate(60deg) translate(-51.96155px, -14px);
  bottom: 0;
}

.hex .inner {
  color: #333;
}

.hex h4 {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 1.44em;
  margin: 0;
}

.hex hr {
  width: 60%;
  border: 0;
  border-top: 3px solid #eee;
  margin: 12px auto;
}

.hex p {
  font-size: 1.2em;
  font-family: 'Kotta One', serif;
  width: 80%;
  margin: 0 auto;
}

.hex.hex-1 {
  background: #74cddb;
}

.hex.hex-2 {
  background: #f5c53c;
}

.hex.hex-3 {
  background: #80b971;
}
*/
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console