How can i delete gap on 2 clip pathed div? - html

Question

I have 2 clip-pathed div and they are so far from each other. How can I make it come closer?
My codepen : https://codepen.io/ugurcanTheReactDev/pen/BawLzdB?editors=1100
To make it more clear I have a photo like :
As you can see they are far from each other. I need to make them nearly together with so small a gap.
My codes :
HTML :
<div className="flex gap-1 h-72 mt-2">
<div className="exploreAreaDiv"> //First one.
<div className="exploreAreaDivOverlay">
<h1 className="text-4xl text-gray-100">EXPLORE THE AREA</h1>
</div>
</div>
<div className="covid-div " style={{ flex: 0.6 }}> //2nd one
<div className="covid-div-overlay">
<h1 className="text-4xl text-gray-100">EXPLORE THE AREA</h1>
</div>
</div>
</div>
CSS:
.exploreAreaDiv {
flex: 1;
cursor: pointer;
position: relative;
background: rgba(40, 40, 40, 1);
clip-path: polygon(0 0, 96% 0, 83% 100%, 0 100%);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/d/d6/Love_Antalya.jpg");
}
.exploreAreaDivOverlay {
background-color: rgba(43, 42, 42, 0.5);
width: 100%;
height: 100%;
position: absolute;
clip-path: polygon(0 0, 96% 0, 83% 100%, 0 100%);
left: 0;
margin-left: -100vw;
font-size: 36px;
color: white;
transition: all 0.5s ease;
display: flex;
justify-content: center;
align-items: center;
}
.exploreAreaDiv:hover .exploreAreaDivOverlay {
margin-left: 0;
}
.covid-div {
width: 100%;
cursor: pointer;
position: relative;
background: rgba(40, 40, 40, 1);
clip-path: polygon(25% 0, 100% 0, 100% 100%, 3% 100%);
background-position: center;
background-size: cover;
overflow: hidden;
background-image: url("https://sedefed.org/wp-content/uploads/2020/03/coronavirus-4914026_1920.jpg");
}
Thank you.

Answer 1

I don't know much about clip-path but what actually happened is those two dives are in contact with each other and can't go over.
in the image, there is a dotted line that shows dives size.
what you have to do is make them overlap each other for some pixel or percentage.
if you don't want to make them overlap you can remove the image of one of the div and make it transparent then set the image to the parent div (flex gap-1 h-72 mt-2).
here I added transform: translateX(10%); in .exploreAreaDiv{} and transform: translateX(-10%); in .covid-div{}. i kept little space which looks good but you can remove it properly but setting transform: translateX(13%); and transform: translateX(-13%);.
.h-72{
height:200px;
}
.flex{
display:flex;
}
.gap-1{
}
.exploreAreaDiv {
flex: 1;
cursor: pointer;
position: relative;
background: rgba(40, 40, 40, 1);
clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
transform: translateX(10%);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
overflow: hidden;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/d/d6/Love_Antalya.jpg");
}
.exploreAreaDivOverlay {
background-color: rgba(43, 42, 42, 0.5);
width: 100%;
height: 100%;
position: absolute;
clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
left: 0;
margin-left: -100vw;
font-size: 36px;
color: white;
transition: all 0.5s ease;
display: flex;
justify-content: center;
align-items: center;
}
.exploreAreaDiv:hover .exploreAreaDivOverlay {
margin-left: 0;
}
.covid-div {
width: 100%;
flex:0.6;
cursor: pointer;
position: relative;
background: rgba(40, 40, 40, 1);
transform: translateX(-10%);
clip-path: polygon(33% 0, 100% 0, 100% 100%, 0% 100%);
background-position: center;
background-size: cover;
overflow: hidden;
background-image: url("https://sedefed.org/wp-content/uploads/2020/03/coronavirus-4914026_1920.jpg");
}
.covid-div-overlay {
background-color: rgba(43, 42, 42, 0.5);
width: 100%;
height: 100%;
position: absolute;
clip-path: polygon(33% 0, 100% 0, 100% 100%, 0% 100%);
right: 0;
transition: all 0.5s ease;
margin-right: -100vw;
z-index: 5;
display: flex;
justify-content: center;
align-items: center;
}
.covid-div:hover .covid-div-overlay {
margin-right: 0;
}
<div class="flex gap-1 h-72 mt-2">
<div class="exploreAreaDiv">
<div class="exploreAreaDivOverlay">
<h1 class="text-4xl text-gray-100">EXPLORE THE AREA</h1>
</div>
</div>
<div class="covid-div ">
<div class="covid-div-overlay">
<h1 class="text-4xl text-gray-100">EXPLORE THE AREA</h1>
</div>
</div>
</div>
you can try other transform properties like transform: scaleX(1.2); or transform: skewX(10deg); but for using skew you have to make changes or have to remove the clip-path.