Making part of a div transparent

Question

I\'m trying to do something like this in HTML. It\'s a header, at the very top of the page. T

Answer 1

**Demo Working Link** - https://codepen.io/iamabhishek/pen/ddoomE

**HTML**

  



**css**
div.main{
    width:50%;
    height:550px;
    background: url('https://images.unsplash.com/photo-1503135935062-b7d1f5a0690f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=cf4d0c234ecaecd14f51a2343cc89b6c&dpr=1&auto=format&fit=crop&w=376&h=564&q=60&cs=tinysrgb') no-repeat;
    background-position:center;
    background-size:cover
}
div.main>div{
    width:100px;
    height:320px;
    background:transparent;
    background-attachment:fixed;
    border-top:25px solid orange;
    border-left:120px solid orange;
    border-bottom:25px solid orange;
    border-right:10px solid orange;
    margin-left:150px

}