父母身高+父母伪元素的束缚子

Question

我有一个div，顶部有一个三角形作为伪元素，在这个div中有一个图像，正如你在this fiddle中看到的那样。我试图使用伪元素使图像包含在父对象的范围内，以便图像一直延伸到三角形。

但是，我不知道该怎么做。我尝试了几种方法，包括倾斜容器等，但没有设法创建一个优雅，响应迅速的解决方案。

如果可能，请给我你的建议。

编辑：我正在尝试使图像如下所示：

e.g。戒指非常大，只是被收纳元件切断了。

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>