I have multiple sets of skewed divs and I would like to include a separate image in each of them. However, when I attempt to insert an image, it also becomes skewed and distorted. Is there a way to prevent this from happening? Ideally, I want the images to be displayed in the black-colored area. Thank you in advance for your assistance!
.wrap {
position: relative;
width: 95vw;
height: 20vw;
margin-right: auto;
margin-left: auto;
background: white;
overflow: hidden;
}
.button-skewed .button {
width: 98%;
height: 100%;
background: black;
display: inline-block;
text-align: center;
box-shadow: inset 0 0 0 1vw #008080, inset 0 0 0 1.1vw #fff;
}
.button-skewed .button:hover ~ span {
background: #007a7a !important;
}
.button-skewed .button:hover ~ span:before {
background: #007a7a !important;
}
.button-skewed .button:hover {
background: #007a7a;
box-shadow: inset 0 0 0 1vw #007a7a, inset 0 0 0 1.1vw #fff;
}
.button-skewed .button.left {
margin-left: -1.7vw;
position: absolute;
left: 0%;
transform: skewX(-20deg) translate(-50%, -50%);
top: 50%;
}
.button-skewed .button.right {
margin-right: 1.7vw;
width: 200%;
position: absolute;
transform: skewX(-20deg) translate(100%, -50%);
top: 50%;
right: 50%;
}
.button-skewed .button .titleleft {
position: absolute;
top: 50%;
left: 71%;
transform: skewX(20deg) translate(-50%, -50%);
display: inline-block;
font-family: montserrat;
color: white;
font-size: 2.6vw;
text-shadow: 2px 2px 5px #000;
}
.button-skewed .button .titleright {
position: absolute;
top: 50%;
left: 12%;
transform: skewX(20deg) translate(-50%, -50%);
display: inline-block;
font-family: montserrat;
color: white;
font-size: 2.6vw;
.button-skewed img {
position: relative;
background-size: cover;
}
.mask-outer-left {
position: absolute;
left: 0;
top: 0;
height: calc(100% - 2vw);
margin-top: 1vw;
margin-bottom: 1vw;
}
.mask-outer-left:before {
content: '';
background: white;
position: absolute;
height: 200%;
width: 100%;
top: 50%;
left: 49%;
transform: translate(-50%, -50%);
}
.mask-outer-right {
position: absolute;
right: 0;
top: 0;
height: calc(100% - 2vw);
margin-top: 1vw;
margin-bottom: 1vw;
}
.mask-outer-right:before {
content: '';
background: white;
position: absolute;
height: 200%;
width: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<div class="wrap">
<div class="button-skewed"><a class="button left" href="#"><span class="titleleft">title here</span></a><span class="mask mask-outer-left"></span><a class="button right" href="#"><span class="titleright">title here</span></a><span class="mask mask-outer-right"></span></div>
</div>
<br>
<div class="wrap">
<div class="button-skewed"><a class="button left" href="#"><span class="titleleft">title here</span></a><span class="mask mask-outer-left"></span><a class="button right" href="#"><span class="titleright">title here</span></a><span class="mask mask-outer-right"></span></div>
</div>