Placing an image inside irregular shaped div - html

Question

I have sets of skewed divs that I would like a separate image in each. Is this possible? If I try to place an image inside, the image is also skewed and looks distorted. How can I fix this? Essentially I would like an image in the black colored spaced. Please and thank you for all your help in advance!!!
.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;
text-shadow: 2px 2px 5px #000;
}
.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>

Answer 1

You may simply add a second css class which skews in the opposite direction. Perhaps someone has a more elegant solution:
.button-skewed .button img {
transform: skewX(20deg)
}
.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;
text-shadow: 2px 2px 5px #000;
}
.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%);
}
.button-skewed .button img {
transform: skewX(20deg)
}
<div class="wrap">
<div class="button-skewed"><a class="button left" href="#"><img src="https://fxfactory.com/downloads/docs/noiseindustries/fxfactorypro/Thumbnails/Stripes.jpg"/><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>