html - 将图像放置在不规则形状的 div 中

Question

我有几组倾斜的 div，我希望每个 div 都有一个单独的图像。这可能吗？如果我尝试在里面放置图像，图像也会倾斜并且看起来扭曲。我怎样才能解决这个问题？本质上我想要一个黑色间隔的图像。请并感谢您提前提供的所有帮助!!!

.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

您可以简单地添加第二个向相反方向倾斜的 css 类。也许有人有更优雅的解决方案:

.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>