是否可以使用CSS HTML和JavaScript在B上的A，C上的B，C上的C？

Question

是否可以使用CSS HTML和JavaScript在B上的A，C上的B，C上的C？

像这样 ：

Answer 1

目前，只有Chrome浏览器支持transform样式：在像素级别（而不是元素级别）上保持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>