Bound Child By Height of Parent + Parent Pseudo Element - html

Question

I have a div with a triangle as a pseudo element on top, and an image inside of this div, as you can see in this fiddle. I am trying to make the image contained within the bounds of the parent with the pseudo element, so that the image extends all the way through the triangle.
However, I am not sure how to do this. I have tried a few ways, including skewing the container etc but have not managed to create an elegant, responsive solution.
Please give me your suggestions if possible.
Edit: I am trying to make the image look like the following:
e.g. the ring is quite large and simply gets cut off by the containing element.
.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

You may try to have the shape as one element and consider some rotation transform and overflow:hidden :
go full page for better result
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>