Html 隐藏四分之一div

如何实现以下目标，两者都是div，
visisble div有一种颜色。
隐藏的div是透明的，可见div的右上部分也必须是透明的

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

---

编辑：或者有没有一种方法可以屏蔽可见div的右上角，它必须是透明的。

下面是重叠div的示例代码

另外一个想法是将后面的矩形/正方形分成4部分，并使1部分的背景色透明

HTML:

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

.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部分的想法-

---

祝你好运

我认为你做不到，但是你可以使用两个具有相同背景颜色的div，一个挨着另一个，但大小不同，还有一个容器div

大概是这样的：

html:

---

我想这不可能如你所愿。如果visible div中只填充了颜色，则可以使用变通方法，例如使用多个div。但据我所知，叠加div无法实现透明。也许这可以帮助你？我必须隐藏部分的1/4，而不是3/4它必须是一个div，而不是2

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

#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;
    }