これは、CSS HTMLとJavaScriptを使用して、B上でAを、C上でBを、C上でCを行うことは可能ですか？

Question

これは、CSS HTMLとJavaScriptを使用して、B上でAを、C上でBを、C上でCを行うことは可能ですか？このような

：あなたは図形のintersecionsを着色することによって、これをachiveでき

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

。ここで重要なのは、メインの形状の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>