有2个区域（自定义形状）

Question

我需要在CSS / HTML中做类似的事情（图像），我不知道如何实现这个目标：

规格：

• 该区块分为2个区域（50/50）
• 每个区域必须包含背景图片和文字
• 每个区域都必须可点击

任何人都知道如何实现这一目标？

Answer 1

我可能会做一些事情。

注意：left .inner块应该有大的padding-left。右.inner块应该有大填充权;

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

.wrapper {
  width: 800px;
  height: 300px;
  overflow: hidden;
}

.scene {
  margin: 0 -60px; /* use this to adjust images */
  height: 100%;
}

.part {
  display: block;
  width: 50%;
  float: left;
  height: 100%;
  -ms-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
  overflow: hidden;
  
  font-size: 30px;
  color: black;
}

.inner {
  margin: 0 -60px; /* use this to adjust images */
  padding: 85px 200px; /* use this to adjust text */
  display: block;
  -ms-transform: skewX(-20deg);
  -webkit-transform: skewX(-20deg);
  transform: skewX(-20deg);
  height: 100%;
  background-size: cover;
}

.part--first .inner {
  background-image: url(http://lorempixel.com/400/200/sports/);
}

.part--second .inner {
  background-image: url(http://lorempixel.com/400/200/nature/);
}

＆＃13;

<div class="wrapper">
  <div class="scene">
     <a href="#" class="part part--first">
       <span class="inner">lorem</span>
    </a>
    <a href="#" class="part part--second">
      <span class="inner">ipsum</span>
    </a>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;