座2區（自定義形狀）

Question

我需要做的CSS/HTML類似的東西（像），我不知道如何做到這一點：

規格：

• 該塊中2個區域（50/50）
• 每個區域必須包含一個背景圖像和文字分割
• 每個區域必須是可點擊的

任何人都知道我怎麼能做到這一點？

Answer 1

我可能會做這件事。

注意：left .inner塊應該有大填充左側。右邊的塊應該有大的填充權;

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