JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<div class="pentamenu">
    <div class="pentm">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 577.8 528.3">
            <defs>
                <pattern xmlns="http://www.w3.org/2000/svg" id="img1" patternUnits="userSpaceOnUse" width="600" height="600">
                    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://chefranov.name/public/2.jpg" x="0" y="0" width="600" height="600"></image>
                </pattern>
                <pattern xmlns="http://www.w3.org/2000/svg" id="img2" patternUnits="userSpaceOnUse" width="600" height="600">
                    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://chefranov.name/public/1.jpg" x="0" y="0" width="600" height="600"></image>
                </pattern>
                <pattern xmlns="http://www.w3.org/2000/svg" id="img3" patternUnits="userSpaceOnUse" width="600" height="600">
                    <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://chefranov.name/public/3.jpg" x="0" y="0" width="600" height="600"></image>
                </pattern>
            </defs> <a xlink:href="http://www.site.ru"><polygon fill="url(#img1)" points="129,0.3 447.3,0.3 502.3,132 289.1,229.3 73.1,132.3  " id="top" /></a>
 <a xlink:href="http://www.ya.ru"><polygon fill="url(#img2)" points="68.3,142.3 283,236.1 283,527.6 0,298 " id ="left" /></a>
 <a xlink:href="http://www.google.ru"><polygon fill="url(#img3)" points="508.4,142.5 293.8,236.3 293.8,527.8 576.8,298.1 " id="right"/></a>

        </svg>
        <div class="pentalink1">Текст 1</div>
        <div class="pentalink2">Текст 2</div>
        <div class="pentalink3">Текст 3</div>
    </div>
</div>

CSS

.pentamenu {
    margin: 0 auto;
    width: 555px;
    padding-top: 80px;
}
.pentm {
    position: absolute;
    width: 555px;
    height: 555px;
}
.pentalink1 {
    position: absolute;
    left: 210px;
    top: 70px;
    text-transform: uppercase;
    font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;
    font-size: 28px;
    color: #FFF;
    
    pointer-events: none;
}
.pentalink2 {
    position: absolute;
    left: 80px;
    top: 270px;
    text-transform: uppercase;
    font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;
    font-size: 28px;
    color: #FFF;
    
    pointer-events: none;
}
.pentalink3 {
    position: absolute;
    left: 310px;
    top: 270px;
    text-transform: uppercase;
    font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;
    font-size: 28px;
    color: #FFF;
    
    pointer-events: none;
}
#top, #left, #right {
    cursor: pointer;
}
svg {
    display: block;
    width: 100%;
    height: 500px;
}

image {
    animation: image-anim 4s infinite alternate;
}

@keyframes image-anim {
    100% {
        transform: scale(1.2);
    }
}