具有 2 个区域的块（自定义形状）答案

【问题标题】：Block with 2 area ( custom shape )具有 2 个区域的块（自定义形状）
【发布时间】：2017-03-02 11:24:47
【问题描述】：

我需要在 CSS/HTML 中做类似的事情（图片），但我不知道如何实现：

规格：

该块被分成 2 个区域 (50/50)
每个区域都必须包含背景图片和文字
每个区域都必须是可点击的

有人知道我如何实现这一目标吗？

【问题讨论】：

你应该向我们展示你的编码，我们应该告诉你为什么它不起作用。现在它不起作用，因为您没有编写任何代码。

标签： html css svg shape

【解决方案1】：

我可能会这样做。

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

* {
  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/);
}

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

【讨论】：