Question

我如何实现以下目标，两者都是div，
可见的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，它们具有相同的背景颜色，但是具有不同的大小和容器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;
    }

隐藏div的四分之一

2 个答案: