JSFiddle - React, Tailwind, and code Playground

by bacodekiller

HTML

<div class="container">
    <div class="left">
        <span>Foo</span>
        <img src="https://res.cloudinary.com/practicaldev/image/fetch/s--VtyagAUK--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/j8jpmo5pzcfx1vlbsxxp.jpg" class="image-test" />
    </div>
    <div class="right">
       
    </div>
    <div class="three">
    
    </div>
        <div class="last">
    
    </div>
</div>

CSS

* {
    padding: 0;
    margin: 0;
}
.container {
    width: 100%;  
    height: 50px;
}
.left,
.right,
.three,
.last{
    float: left;
}

.left span,
.right span,
.three span,
.last span{
    position: absolute;
    top: 50%;
    line-height: 50px;
    z-index: 100;
}

.left .image-test{
    position: absolute;
    top: 50%;
    line-height: 50px;
    z-index: -1;
    width: 100%;
    height: 50px;
    
}

.left {
    width: 20%;
    position: relative;
    border-bottom: 50px solid blue;
    border-right: 50px solid green;
   /*  -webkit-transform: rotateX(-180deg); */
}
.left:hover .image-test {
   z-index: 200;
}

.left span {
    width: 100%;
    text-align: center;
   /*  -webkit-transform: rotateX(180deg); */
}

.right {
    width: 20%;
    border-top: 50px solid green;
    border-right: 50px solid red;
    -webkit-transform: rotateX(-180deg);
}

.right span {
    width: 100%;
    text-align: center;
    -webkit-transform: rotateX(180deg);
}

.three {
    width: 20%;
    border-top: 50px solid red;
    border-right: 50px solid yellow;
    -webkit-transform: rotateX(-180deg);
}

.three span {
    width: 100%;
    text-align: center;
    -webkit-transform: rotate(-180deg) rotateX(-180deg);
}

.last {
    width: 20%;
    border-top: 50px solid yellow;
    -webkit-transform: rotateX(-180deg);
}

JavaScript

document.querySelector('.left').addEventListener('click', function () {
    alert('clicked left side');
})

document.querySelector('.right').addEventListener('click', function () {
    alert('clicked right side');
})