這是可能做A，B，B，C，C上A與CSS HTML和JavaScript？

Question

這是可能使用CSS HTML和JavaScript在A上進行A，B在C上，C上進行？

這樣的：

Answer 1

在這一刻，只有Chrome支持變換風格：保持-3D在像素級別 - 而不是在元素級別。由於它是在像素級完成的，因此元素的某些部分可以在另一個元素的前面呈現，而在某些元素的後面。

body { 
 
    transform-style: preserve-3d; 
 
} 
 

 
div { 
 
    width: 200px; 
 
    height: 100px; 
 
    line-height: 100px; 
 
    text-align: center; 
 
    position: absolute; 
 
    transform-style: preserve-3d; 
 
} 
 
.A { 
 
    background-color: tomato; 
 
    left: 50px; 
 
    top: 0px; 
 
    transform: rotateY(3deg); /* this does the trick */ 
 
} 
 

 
.B { 
 
    background-color: lightgreen; 
 
    left: 50px; 
 
    top: 0px; 
 
    transform: rotate(120deg); 
 
    transform-origin: center bottom; 
 
} 
 

 
.C { 
 
    background-color: lightblue; 
 
    left: 50px; 
 
    top: 0px; 
 
    transform: rotate(-120deg); 
 
    transform-origin: center bottom; 
 
}

<div class="A">Some fancy text</div> 
 
<div class="B">Some fancy text</div> 
 
<div class="C">Some fancy text</div>

所以，就目前而言，你將被限制使用的招數 - 基本渲染元素作爲2個不同的元素

Answer 2

您可以通過着色形狀的intersecions實現這一目標。這裏的關鍵是使用主形狀overflow: hidden;與position: relative; 這裏設置交叉部分是一個片段：

.box1 { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: red; 
 
    position: relative; 
 
    top: 40px; 
 
} 
 
.box2 { 
 
    width: 250px; 
 
    height: 250px; 
 
    background: navy; 
 
    border-radius: 0%; 
 
    position: absolute; 
 
    left: 75px; 
 
    top: 50px; 
 
    overflow: hidden; 
 
} 
 
.box3 { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: black; 
 
    position: absolute; 
 
    left: 50px; 
 
    top: 150px; 
 
    overflow: hidden; 
 
} 
 

 
#top-left { 
 
    width: 150px; 
 
    height: 150px; 
 
    background: red; 
 
    position: relative; 
 
    left: -25px; 
 
} 
 

 
#top_right { 
 
    width: 150px; 
 
    height: 150px; 
 
    background: navy; 
 
    position: relative; 
 
    left: 50px; 
 
}

<div class="box1"> 
 
    <div class="box2"> 
 
    <div id="top-left"></div> 
 
    </div> 
 
    <div class="box3"> 
 
    <div id="top_right"></div> 
 
    </div> 
 
</div>