CSS problem ze zrobieniem tła

Witam, dzisiaj kompletnie pogubiłem się z tworzeniem tła w divie ( jeżeli mogę nazwać to tłem)
Problem polega na tym że tworze diva ( div ma ustawiony na width 100% i bg-color) w którym znajdują się kolejne 2 divy obok siebie w tym pierwszym jest obrazek, a problem zaczyna się w drugim ponieważ tam dodaje obrazek i na ten obrazek nakładam dodatkowo trapez i chciałbym żeby ten obrazek zajmował 100% objętości trapezu a resztę obrazka obciął ( co wychodzi poza trapez) i zostawił bg-color głownego diva (rodzica)

Kod który mam (wrzucam tylko kod od diva w którym mam problem)

div.miod
                 {   
                    
                    
                        
                        width: 100%;
                        height: 685px;
                        background: url('../img/miod.jpg') no-repeat;
                        
                    
                    
                    .trapez{
                        width: 100%;
                        height: 100%;
                        border-bottom: 685px solid #ffb210;
                        border-right: 100px solid transparent;
                        
                        
 
                    }

jeśli to czysty CSS (bez dodatków typu Sass), to kod, który wrzuciłeś, jest nieprawidłowy, bo brak klamerki zamykającej, przed .trapez

a problem zaczyna się w drugim ponieważ tam dodaje obrazek i na ten obrazek nakładam dodatkowo trapez i chciałbym żeby ten obrazek zajmował 100% objętości trapezu a resztę obrazka obciął ( co wychodzi poza trapez)

weź to narysuj i wrzuć rysunek tego, co chcesz osiągnąć i najlepiej kod tego, co już masz, na jakimś codepen czy innym czymś.

resztę obrazka obciął ( co wychodzi poza trapez)

spróbuj overflow: hidden

LukeJL napisał(a):

jeśli to czysty CSS (bez dodatków typu Sass), to kod, który wrzuciłeś, jest nieprawidłowy, bo brak klamerki zamykającej, przed .trapez

a problem zaczyna się w drugim ponieważ tam dodaje obrazek i na ten obrazek nakładam dodatkowo trapez i chciałbym żeby ten obrazek zajmował 100% objętości trapezu a resztę obrazka obciął ( co wychodzi poza trapez)

weź to narysuj i wrzuć rysunek tego, co chcesz osiągnąć i najlepiej kod tego, co już masz, na jakimś codepen czy innym czymś.

resztę obrazka obciął ( co wychodzi poza trapez)

spróbuj overflow: hidden

Jest tutaj dodatek Sass.

Trapez posiada opacity i chicałbym wyciąć ten kawałek grafiki (plaster miodu) gdzie nie ma nałożonego trapezu

ofverflow: hidden- nie działa

użyj clip-path

demo:
https://jsfiddle.net/4sm7vb3o/

Dzieki, problem wyjaśniony.