隱藏div的四分之一

Question

如何才能實現以下功能，均爲divs，
可粘貼的div有顏色。
隱藏的div是透明的，可見div的右上部分也必須是透明的。

  ------------ 
      |//////////| 
--------------------///| 
|   |/hidd/|///| 
|   |///en/|///| 
|   |//////|///| 
|   -------|---- 
|     | 
|  visible  | 
|     | 
|     | 
-------------------- 

編輯：或者有沒有一種方法可以遮蓋可見div的右上角，它必須是透明的。

Answer 1

以下是重疊div的示例代碼。

另外的想法是將矩形/正方形分成4個部分，並使1部分的背景色透明。

HTML：

<div class="back"></div> 
<div class="front"></div> 

CSS：

.back { 
    width: 300px; 
    height: 300px; 
    background: #ccc; 
    position: absolute; 
    top: 0px; 
    left: 300px; 
} 

.front { 
    width: 300px; 
    height: 300px; 
    background: green; 
    position: relative; 
    top:100px; 
    left:100px 
} 

此外，

這裏是用不透明玩和隱藏3/4部分的圖像的想法 - CodePen

好運

Answer 2

我不認爲你能做到這一點，但你可以使用2個格與背景顏色相同一個挨着另一個，但具有不同尺寸和div容器。

事情是這樣的：http://jsfiddle.net/a455b6at/1/

HTML：

<div id="container"> 
    <div id="one">div1</div> 
    <div id="two">div2</div> 
</div> 

CSS：

#container{ 
     width:200px; 
     height:200px; 
     display:block; 
    } 
    #one { 
     background-color: red; 
     width: 100px; 
     height: 200px; 
     display: block-inline; 
     float:left; 
    } 
    #two { 
     background-color: red; 
     width: 100px; 
     height: 100px; 
     display: block-inline; 
     margin-top: 100px; 
     float:right; 
    }