Question

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

＆＃13;

.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%);
}

＆＃13;

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

＆＃13;

Answer 1

你可以简单地添加第二个css类，它在相反的方向上倾斜。也许有人有一个更优雅的解决方案：

public interface Repo<T, K> {
    T read(K id);
    List<T> findAll();
}

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

1 个答案: