隐藏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; 
    }