将 div 的一角堆叠在另一个 div 下方

Question

我正在尝试将蓝色正方形 div 的角放在橙色 div 下方。我尝试了我所知道的一切： z-index 不起作用，因为我的 div 包裹在另一个 div 中，如果我打开它，我将无法定位八个元素。

谁能告诉我该怎么做？或者如何对所有元素使用 z-index ？

我有：

我需要的：

我的 HTML 到目前为止：

 body {
   background-color: #222;
   background-repeat: no-repeat;
 }
 #blueSquare {
   position: absolute;
   left: 15px;
   top: 15px;
   width: 50%;
   height: 170px;
   -webkit-transform: rotate(-45deg);
 }
 #rightTopblueSquare {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #7ab9c2;
   opacity: .99;
 }
 #leftBottomblueSquare {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #6baaae;
 }
 /*----------------------------------*/
 #greySquare {
   width: 50%;
   height: 170px;
   position: absolute;
   bottom: 15px;
   left: 15px;
   -webkit-transform: rotate(45deg);
 }
 #lefTopgreySquare {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #656f78;
 }
 #rightButtomgreySquare {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #313439;
 }
 /*----------------------------------*/
 #redSquare {
   width: 50%;
   height: 170px;
   position: absolute;
   right: 15px;
   bottom: 15px;
   -webkit-transform: rotate(-45deg);
 }
 #leftBottomredSquare {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #a2191d;
 }
 #rightTopredSquare {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #d63030;
 }
 /*----------------------------------*/
 #orangeSquare {
   width: 50%;
   height: 170px;
   position: absolute;
   right: 15px;
   top: 15px;
   -webkit-transform: rotate(45deg);
   z-index: -1;
 }
 #rightBottomorangeSquare {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #f42b06;
 }
 #lefttToporangeSquare {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #ff6a05;
   opacity: 1;
 }

<div id="orangeSquare">
  <div id="rightBottomorangeSquare"></div>
  <div id="lefttToporangeSquare"></div>
</div>
<div id="redSquare">
  <div id="leftBottomredSquare"></div>
  <div id="rightTopredSquare"></div>
</div>
<div id="greySquare">
  <div id="lefTopgreySquare">leftTop</div>
  <div id="rightButtomgreySquare">rightBottom grey sqr</div>
</div>
<div id="blueSquare">
  <div id="rightTopblueSquare">rightTop</div>
  <div id="leftBottomblueSquare">LeftBotom blue sqr</div>
</div>

Answer 1

您可以通过硬编码或使用某些 JS 库来部分复制橙色方块。然后设置比蓝色方块更高的 z-index。如果裁剪正确，它不会与红色方块重叠。

这不是一个完美的解决方案，它会导致其他问题，即如果文本与复制和裁剪元素的边界重叠。

此技术也用于无法创建 3D 元素的旧版 Photoshop。

Answer 2

这可以使用 CSS 3D 变换来完成。首先，创建一个外部容器并将您的 HTML 包裹在其中：

#outer {
    position: relative;
    width: 500px;
    height: 400px;
    perspective: 1000px;
    transform-style: preserve-3d;
}

外部容器具有较大的透视值，以防止元素在我们旋转时看起来不同。它使用 transform-style: preserve-3d; 覆盖默认的堆叠引擎并将所有内容堆叠在 3D 上下文中。这样可以确保一切都正确堆叠。

然后，为了使您的元素正确重叠，只需将每个元素绕 Y 轴稍微扭曲 5 度即可：

transform: ... rotateY(5deg);

您的备用元素将得到相反的扭曲：

transform: ... rotateY(-5deg);

结果是一个在 3d 中有意义的场景，并且与它在物理世界中的堆叠完全相同。

工作、生活示例：

body {
   background-color: #222;
   background-repeat: no-repeat;
 }
 #blueSquare {
   position: absolute;
   left: 15px;
   top: 15px;
   width: 50%;
   height: 170px;
   -webkit-transform: rotateZ(-45deg) rotateY(5deg) ;
           transform: rotateZ(-45deg) rotateY(5deg) ;
 }
 #rightTopblueSquare {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #7ab9c2;
 }
 #leftBottomblueSquare {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #6baaae;
 }
 /*----------------------------------*/
 #greySquare {
   width: 50%;
   height: 170px;
   position: absolute;
   bottom: 15px;
   left: 15px;
   -webkit-transform:rotateZ(45deg)  rotateY(-5deg) ;
           transform:rotateZ(45deg)  rotateY(-5deg) ;
 }
 #lefTopgreySquare {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #656f78;
 }
 #rightButtomgreySquare {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #313439;
 }
 /*----------------------------------*/
 #redSquare {
   width: 50%;
   height: 170px;
   position: absolute;
   right: 15px;
   bottom: 15px;
   -webkit-transform:  rotateZ(-45deg) rotateY(-5deg);
           transform:  rotateZ(-45deg) rotateY(-5deg);
 }
 #leftBottomredSquare {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #a2191d;
 }
 #rightTopredSquare {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #d63030;
 }
 /*----------------------------------*/
 #orangeSquare {
   width: 50%;
   height: 170px;
   position: absolute;
   right: 15px;
   top: 15px;
   -webkit-transform:  rotateZ(45deg) rotateY(5deg);
           transform:  rotateZ(45deg) rotateY(5deg);
 }
 #rightBottomorangeSquare {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #f42b06;
 }
 #lefttToporangeSquare {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #ff6a05;
 }

#outer {
    position: relative;
    width: 500px;
    height: 400px;
    -webkit-perspective: 1000px;
            perspective: 1000px;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

<div id="outer">
    <div id="orangeSquare">
      <div id="rightBottomorangeSquare"></div>
      <div id="lefttToporangeSquare"></div>
    </div>
    <div id="redSquare">
      <div id="leftBottomredSquare"></div>
      <div id="rightTopredSquare"></div>
    </div>
    <div id="greySquare">
      <div id="lefTopgreySquare">leftTop</div>
      <div id="rightButtomgreySquare">rightBottom grey sqr</div>
    </div>
    <div id="blueSquare">
      <div id="rightTopblueSquare">rightTop</div>
      <div id="leftBottomblueSquare">LeftBotom blue sqr</div>
    </div>
</div>

JSFiddle 版本：https://jsfiddle.net/jjurL6j8/1/

Answer 3

这个谜题的简单解决方法是复制最后一个 div 并为他设置不透明度

下面有HTML和CSS代码：

<body>
 <div id="orangeSquare">
        <div id="rightBottomorangeSquare"></div>
        <div id="lefttToporangeSquare"></div>
    </div>
      <div id="orangeSquare2"> <!- this new line->
    <div id="rightBottomorangeSquare2"></div>
    <div id="lefttToporangeSquare2"></div>
      </div><!- this new line end->
    <div id="redSquare">
        <div id="leftBottomredSquare"></div>
        <div id="rightTopredSquare"></div>
    </div>
    <div id="greySquare">
        <div id="lefTopgreySquare">leftTop</div>
        <div id="rightButtomgreySquare">rightBottom grey sqr</div>
    </div>
    <div id="blueSquare">
        <div id="rightTopblueSquare">rightTop</div>
        <div id="leftBottomblueSquare">LeftBotom blue sqr</div>
    </div>

并添加到第一个CSS这段CSS代码：

    #orangeSquare2 {
   width: 50%;
   height: 170px;
   position: absolute;
   right: 15px;
   top: 15px;
   -webkit-transform: rotate(45deg);
   z-index: -1;
 }
 #rightBottomorangeSquare2 {
   height: 100%;
   width: 50%;
   position: relative;
   left: 50%;
   background-color: #f42b06;

 }
 #lefttToporangeSquare2 {
   position: relative;
   top: -100%;
   height: 100%;
   width: 50%;
   background-color: #ff6a05;
   opacity: 0;
 }

效果很好 =) 并且随着 windows 的大小而变化这里是照片

将 div 的一角堆叠在另一个 div 下方

Stacking a corner of a div underneath another div

html

css

z-index