sergiu-radu

<!-- SVG elements don't need to be visible, so we need `width="0" height="0"` as we can't set `display: none` -->
<svg width="0" height="0">
    <!-- clipPath elements go inside the defs -->
    <defs>
        <!-- Pentagon-to-square puzzle pieces -->
        <clipPath id="pentagon-1"><path d="m65,235h111.19c-37.07-26.81-74.13-53.62-111.19-80.44v80.44z"/></clipPath>
        <clipPath id="pentagon-2"><path d="m155.25,214.72c9.6313,6.55,18.732,14.721,28.688,20.281h51.062v-80.469c-26.583,20.062-53.167,40.125-79.75,60.188z"/></clipPath>
        <clipPath id="pentagon-3"><path d="m151.84,212.25c19.604-14.792,39.208-29.583,58.812-44.375h-120.22c20.469,14.792,40.938,29.583,61.406,44.375z"/></clipPath>
        <clipPath id="pentagon-4"><path d="m65,149.59c6.0625,4.3542,12.125,8.7083,18.188,13.062,10.604-32.55,21.212-65.098,31.812-97.65h-50v84.594z"/></clipPath>
        <clipPath id="pentagon-5"><path d="m86.875,163.88h123.44c-33.125-24.5-66.25-49-99.375-73.5-8.0208,24.5-16.042,49-24.062,73.5z"/></clipPath>

sergiu-radu

<h2 class="team-header">Awesome Team</h2>

<div class="team-member">
    <div class="clip-container clip-pentagon">
        <div class="clip"></div>
        <div class="clip"></div>
        <div class="clip"></div>
        <div class="clip"></div>
        <div class="clip"></div>
        <div class="clip"></div>

sergiu-radu

/* Basic styles for pieces */

.clip-container {
  position: relative;
  width: 300px;
  height: 300px;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

sergiu-radu

$figures: (
                ('pentagon', $pentagon-transform, '../img/face-1.jpg'),
                ('hexagon', $hexagon-transform, '../img/face-2.jpg'),
                ('octagon', $octagon-transform, '../img/face-3.jpg'),
);

@each $figure in $figures {
  $name: nth($figure, 1);
  $transform: nth($figure, 2);
  $image: nth($figure, 3);

sergiu-radu

$octagon-transform: (
        translate(-135px, 0px) rotate(110.5deg),
        translate(0px, 135px) rotate(110.5deg),
        translate(135px, 0px) rotate(110.5deg),
        translate(0px, -135px) rotate(110.5deg),
        translate(0px, 0px) rotate(41deg),
);

sergiu-radu

// From: http://stackoverflow.com/a/33152824/4908989
// Detect IE8+ and Edge
if (document.documentMode || /Edge/.test(navigator.userAgent)) {
    document.body.className = 'ie-edge';
}

sergiu-radu

/* Fallback for Internet Explorer and Edge */

.ie-edge {

  .clip {
    // Hiding all pieces
    display: none;

    // Show the first piece without transforms
    &:first-child {

sergiu-radu

// Add on element with overflow
-webkit-mask-image: -webkit-radial-gradient(white, black);

sergiu-radu

[class*="header-menu"][data-type="type-2"] > ul > li > a:after {
	top: 0;
	bottom: initial !important;
}

sergiu-radu

.ct-header [data-sticky*="yes"] [data-row="middle"] {
	background-color: red !important;
}