Double background

Question

I am trying to achieve the similar display for the highlighted part in the picture with yellow and black background. The three boxes displaying half in the yellow and half in the black bg.

Can anybody help me deal with it in CSS BOOTSTRAP.

Thanks in advance.

https://i.sstatic.net/yPj0w.png

Answer 1

The 3 boxes are simply positioned absolutely over a background image. See this-

#bgbox {
    background-color: black;
    border-left: 50px solid yellow;
    width:50px;
    height:100px;
}
#top {
    position:absolute;
    top:40px;
    left:40px;
    width:30px;
    height:30px;
    background-color:blue;
    
}

<div id="bgbox">
</div>
<div id="top">
</div>