<section class="social">
<div class="socialtab facebook">
<svg class="polygon">
<path id="Polygon" data-name="Polygon" d="M1030.5,3296.99l-61.5-107h123Z" transform="translate(-969 -3190)" class="triangle"></path></svg>
<a href="#" target="_blank" rel="noopener noreferrer">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.55 32" class="icon facebookicon">
<defs>
<style>.cls-1{fill-rule:evenodd;}</style>
</defs><title>f</title><path class="cls-1" d="M323.68,593.68V608h7V593.75h4.75l1.15-5.94h-5.85v-4.36A1.29,1.29,0,0,1,332,582h3.38v-6h-6.32c-2.18,0-5.4,2.69-5.4,5.54v6.1H320v6Z" transform="translate(-320 -576)"></path></svg></a></div>
<div class="socialtab twitter">
<svg class="polygon">
<path id="Polygon" data-name="Polygon" d="M960.5,3193.01l61.5,107H899Z" transform="translate(-899 -3193)" class="triangle"></path></svg>
<a href="#" target="_blank" rel="noopener noreferrer">
<svg class="icon twittericon" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414">
<path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.375-1.337.648-2.085.795-.598-.638-1.45-1.036-2.396-1.036-1.812 0-3.282 1.468-3.282 3.28 0 .258.03.51.085.75C5.152 5.39 2.733 4.084 1.114 2.1.83 2.583.67 3.147.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.416-.02-.617-.058.418 1.304 1.63 2.253 3.067 2.28-1.124.88-2.54 1.404-4.077 1.404-.265 0-.526-.015-.783-.045 1.453.93 3.178 1.474 5.032 1.474 6.038 0 9.34-5 9.34-9.338 0-.143-.004-.284-.01-.425.64-.463 1.198-1.04 1.638-1.7z" fill-rule="nonzero"></path></svg></a></div>
<div class="socialtab instagram">
<svg class="polygon">
<path id="Polygon" data-name="Polygon" d="M1030.5,3296.99l-61.5-107h123Z" transform="translate(-969 -3190)" class="triangle"></path></svg>
<a href="#" target="_blank" rel="noopener noreferrer">
<svg class="icon instagramicon" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<title>insta</title>
<path d="M345.67,1040a9.67,9.67,0,1,1-19.17-1.86H320V1051a5,5,0,0,0,5,5h22a5,5,0,0,0,5-5v-12.86h-6.51A9.73,9.73,0,0,1,345.67,1040Zm1.32-16H325a5,5,0,0,0-5,5v5.42h8.1a9.67,9.67,0,0,1,15.8,0H352V1029A5,5,0,0,0,347,1024Zm2.45,6.18a0.89,0.89,0,0,1-.89.89h-2.68a0.9,0.9,0,0,1-.89-0.89v-2.68a0.9,0.9,0,0,1,.89-0.89h2.68a0.89,0.89,0,0,1,.89.89v2.68ZM342,1040a6,6,0,1,0-6,6A6,6,0,0,0,342,1040Z" transform="translate(-320 -1024)"></path></svg></a></div>
<div class="socialtab youtube">
<svg class="polygon">
<path id="Polygon" data-name="Polygon" d="M1030.5,3296.99l-61.5-107h123Z" transform="translate(-969 -3190)" class="triangle"></path></svg>
<a href="#" target="_blank" rel="noopener noreferrer">
<svg class="icon youtubeicon" id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 22.32">
<defs><style>.cls-1{fill-rule:evenodd;}</style></defs>
<title>youtube</title>
<path class="cls-1" d="M1214.64,395.83c-0.88-1.56-1.83-1.86-3.74-2s-6.73-.18-10.9-0.18h0c-4.18,0-9,.06-10.9.18s-2.86.41-3.74,2-1.36,4.27-1.36,9h0c0,4.74.47,7.44,1.36,9s1.83,1.86,3.74,2,6.73,0.18,10.9.18h0c4.18,0,9-.06,10.9-0.18s2.86-.41,3.74-2,1.36-4.27,1.36-9h0C1216,400.1,1215.53,397.39,1214.64,395.83Zm-17.83,14.88V399l9.09,5.87Z" transform="translate(-1184 -393.68)"></path></svg></a></div>
</section>

section.social {
     padding: 120px 0;
     width: 268px;
     height: 300px;
     margin: 0 auto;
     position: relative;
     overflow: visible;
}
section.social .facebook {
     left: 31px;
     top: 0px;
}
section.social .twitter {
     left: 101px;
     top: 4px;
}
section.social .instagram {
     left: 171px;
     top: 0px;
}
section.social .youtube {
     top: 120px;
     left: 101px;
}
section.social .socialtab {
     position: absolute;
     -webkit-transition: -webkit-transform 200ms ease;
     transition: transform 200ms ease;
     width: 63px;
     height: 108px;
     overflow: visible;
     will-change: transform;
}
section.social .socialtab .polygon {
     position: absolute;
     z-index: 1;
     width: 126px;
     left: -31px;
     height: 108px;
     pointer-events: none;
}
section.social .polygon {
     fill: #231828;
     fill-rule: evenodd;
     -webkit-transition: all 200ms ease;
     transition: all 200ms ease;
}
section.social svg {
     overflow: hidden;
}
section.social .socialtab .icon {
     fill: white;
     fill-rule: evenodd;
     position: absolute;
     width: 32px;
     top: 20px;
     left: 16px;
     height: 32px;
     z-index: 2;
}
section.social .twitter .icon {
     top: 60px;
     left: 14px;
}
section.social .facebook:hover {
     -webkit-transform: scale(1.1) translate(-10px, -10px);
     -ms-transform: scale(1.1) translate(-10px, -10px);
     transform: scale(1.1) translate(-10px, -10px);
}
section.social .facebook:hover .polygon {
     fill:#365396
}
section.social .twitter:hover{
     -webkit-transform:scale(1.1) translate(0px, 0px);
     -ms-transform:scale(1.1) translate(0px, 0px);
     transform:scale(1.1) translate(0px, 0px)
}
section.social .twitter:hover .polygon{
     fill:#00a8f0
}
section.social .instagram:hover{
     -webkit-transform:scale(1.1) translate(10px, -10px);
     -ms-transform:scale(1.1) translate(10px, -10px);
     transform:scale(1.1) translate(10px, -10px)
}
section.social .instagram:hover .polygon{
     fill:#386c99
}
section.social .youtube:hover{
     -webkit-transform:scale(1.1) translate(0px, 10px);
     -ms-transform:scale(1.1) translate(0px, 10px);
     transform:scale(1.1) translate(0px, 10px)
}
section.social .youtube:hover .polygon{
     fill:#ff3333
}