<link href='//fonts.googleapis.com/css?family=Gentium+Book+Basic:400,700' rel='stylesheet' type='text/css'>

<a class='logo' href="http://www.dfds.com/">    
  
  <div class='rhombus'>
    <div class='circle'>
      <div class='triangle triangle-down'></div>
      <div class='triangle triangle-right'></div>
      <div class='triangle triangle-left'></div>
      <div class='triangle triangle-up'></div>    
    </div>    
  </div>
  
  <div class='text'>dfds</div>
  
</a>
@import "compass/css3";

$brand-color: #00447C;
$brand-color-light: white;
$circle-size: 2.5em;
$triangle-size: 1em;
$triangle-size-half: $triangle-size / 2;
$triangle-offset: $triangle-size-half - 0.1em;
$min-width: 3.5em;
$min-height: 4.5em;
$logo-min-width: $min-width * 3.5;
$font-size: 300%;
$transition-delay: 0.5s;


html {
    box-sizing: border-box;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

html, body{
  color: $brand-color;
  xbackground: #333;
}

.logo{     
    text-decoration: none;
    transition: transform $transition-delay;
    font-family: 'Gentium Book Basic', serif;
    position: relative;
    display: block;
    color: $brand-color;
    xbackground: black;    
    width: $logo-min-width;
    min-width: 0;
    max-width: 100%;  
    margin: auto;
    margin-top: 7em;
   
    &:hover .rhombus::before {    
      transform: skew(25deg);
    }
    &:hover .text {    
      transform: scale3d(2.6, 2.6, 1.0);
      opacity: 0.0;
    }
    &:hover .triangle {    
      transition:
        $transition-delay top $transition-delay, 
        left $transition-delay;
      
      top: calc(50% - #{$triangle-size-half});
      left: calc(50% - #{$triangle-size-half});
    }
     
    @media (min-width: 480px){
       transform: scale(1.5, 1.5);      
    }
    @media (min-width: 768px){
       transform: scale(2, 2);
    }
    @media (min-width: 992px){
       transform: scale(3, 3);      
    }
}


.text{  
  transition: all $transition-delay;
  display: inline-block;
  xbackground: yellowgreen;
  font-size: $font-size;
  font-weight: 400;
  text-transform: uppercase;    
  position: absolute;
  top:  calc(50% - 0.5em);
  left: calc(50% - 0.5em);   
}

.rhombus{    
  display: inline-block;  
  background: transparent;
  xbackground: red;
  min-width: $min-width;
  min-height: $min-height;
  position: relative;
  
    &::before{
      transition: all $transition-delay;
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;  
      background: $brand-color;
      transform: skew(-25deg);
    }
}

.circle{
  min-width: $circle-size;
  min-height: $circle-size;
  background: $brand-color;
  border-radius: 50%;  
  border: 0.1em solid $brand-color-light;  
  position: absolute;
  top: calc(50% - #{$circle-size} / 2);
  left: calc(50% - #{$circle-size} / 2);
}

.triangle{
  width: 0;  height: 0;
  border-style: solid;  
  transition: 
   top $transition-delay, 
   $transition-delay left $transition-delay;
}

.triangle-down{
  position: absolute;  
  top: calc(50% - #{$triangle-size-half} - #{$triangle-offset});
  left: calc(50% - #{$triangle-size-half});
  border-width: $triangle-size $triangle-size-half 0 $triangle-size-half;
  border-color: $brand-color-light transparent transparent transparent;  
}

.triangle-up{
  position: absolute;
  top: calc(50% - #{$triangle-size-half} + #{$triangle-offset});
  left: calc(50% - #{$triangle-size-half});
  border-width: 0 $triangle-size-half $triangle-size $triangle-size-half;
  border-color: transparent transparent $brand-color-light transparent;
}

.triangle-right{
  position: absolute;
  top: calc(50% - #{$triangle-size-half});
  left: calc(50% - #{$triangle-size-half} - #{$triangle-offset});
  border-width: $triangle-size-half 0 $triangle-size-half $triangle-size;
  border-color: transparent transparent transparent $brand-color-light;
}
.triangle-left{
  position: absolute;
  top: calc(50% - #{$triangle-size-half});
  left: calc(50% - #{$triangle-size-half} + #{$triangle-offset});
  border-width: $triangle-size-half $triangle-size $triangle-size-half 0;
  border-color: transparent $brand-color-light transparent transparent;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.