通过父级高度+父级伪元素绑定的子级

Question

我有一个div，顶部有一个三角形作为伪元素，在此div中有一个图像，如您在小提琴中看到的那样。 我试图用伪元素使图像包含在父对象的边界内，以使图像一直延伸到整个三角形。

但是，我不确定如何执行此操作。 我尝试了几种方法，包括使容器倾斜等，但是没有设法创建一个优雅的，响应迅速的解决方案。

如果可以的话，请给我您的建议。

编辑：我试图使图像看起来像下面：

例如，环很大，只是被包含的元素切断。

 .bg { background: black; color: white; position: relative; filter: drop-shadow(0 0 3vh rgba(30, 14, 43, 1)); height: 20vh; width: 100vw; margin: 30vh 0; } .bg::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; display: block; border-bottom: 18vh solid black; border-right: 12vw solid transparent; border-left: 88vw solid transparent; } .ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .container { height: 100%; width: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; overflow: hidden; } 

 <div class='bg'> <div class='container'> <img src='http://pngimg.com/uploads/jewelry/jewelry_PNG6788.png' class='ring'> </div> </div> 

Answer 1

您可以尝试将形状作为一个元素，并考虑一些旋转变换和overflow:hidden ：

进入整页以获得更好的结果

  body { margin: 0; } .bg { color: white; position: relative; height: 90vh; overflow: hidden; text-align: right; } .container { position: absolute; filter: drop-shadow(0 0 3vh rgba(30, 14, 43, 1)); height: 160%; transform: rotate(-20deg); top: 42%; left: -2%; right: -4%; background: #000; overflow: hidden; } img { position: absolute; top: 15%; left: 61%; transform: translate(-50%, -50%) rotate(20deg); ] 

 <div class='bg'> <div class="container"> <img src='http://pngimg.com/uploads/jewelry/jewelry_PNG6788.png' class='ring'> </div> </div>