<div class="title">
<h1>The <span>big</span> short</h1>
<div class="arrow bale"></div>
<div class="arrow carell"></div>
<div class="arrow pitt"></div>
<div class="arrow gosling"></div>
</div>
body {font-family: 'Playfair Display', serif;}
.title {
position: absolute;
width: 150px;
height: 150px;
margin-top: -75px;
margin-left: -75px;
top: 50%;
left: 50%;
}
h1 {
text-transform: uppercase;
font-size: 40px;
line-height: 0.8;
text-align: center;
color: #9c7501;
}
span {
font-size: 55px;
color: #000;
}
.arrow {
width: 340px;
height: 300px;
position: absolute;
}
.bale {
top: -240px;
left: -230px;
background: url("http://vasilis-tsirimokos.com/codepen/bale.jpg");
background-size: cover;
background-position: 45% 0%;
-webkit-clip-path: polygon(0% 50%, 20% 50%, 20% 0%, 80% 0%, 80% 50%, 100% 50%, 50% 100%);
clip-path: polygon(0% 50%, 20% 50%, 20% 0%, 80% 0%, 80% 50%, 100% 50%, 50% 100%);
}
.carell {
top: -200px;
right: -280px;
background: url("http://vasilis-tsirimokos.com/codepen/carell.jpg");
background-size: cover;
-webkit-clip-path: polygon(50% 0%, 50% 20%, 100% 20%, 100% 80%, 50% 80%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 50% 20%, 100% 20%, 100% 80%, 50% 80%, 50% 100%, 0% 50%);
}
.pitt {
bottom: -230px;
right: -230px;
background: url("http://vasilis-tsirimokos.com/codepen/pitt.jpg");
background-size: cover;
background-position: 70% 0%;
-webkit-clip-path: polygon(20% 100%, 20% 50%, 0 50%, 50% 0, 100% 50%, 80% 50%, 80% 100%);
clip-path: polygon(20% 100%, 20% 50%, 0 50%, 50% 0, 100% 50%, 80% 50%, 80% 100%);
}
.gosling {
bottom: -190px;
left: -280px;
background: url("http://vasilis-tsirimokos.com/codepen/gosling.jpg");
background-position: 20% 0%;
-webkit-clip-path: polygon(0% 20%, 50% 20%, 50% 0%, 100% 50%, 50% 100%, 50% 80%, 0% 80%);
clip-path: polygon(0% 20%, 50% 20%, 50% 0%, 100% 50%, 50% 100%, 50% 80%, 0% 80%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.