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

Using kleinfreund's code:
This DEMO

Fully working page example: here

Answer 2

Future Options

The ideal scenario would be to use a single element with no images.

Masking and/or clipping would be helpful in situations like this, though browser support is limited. It does seem that progress has been made on the spec (below) since I first wrote this answer, so that's encouraging.

• http://www.w3.org/TR/css-masking/
• http://www.html5rocks.com/en/tutorials/masking/adobe/

Practical Approach

For now, I would go with an image-based solution. It doesn't need to be complex.

I recommend avoiding raster graphics since high-density displays are becoming more and more common (nearly every tablet/smartphone and 4K PC monitors). To accomplish this, SVG will work in most modern browsers and PNG can be used as a fallback.

Demos

• Here's a demo using a PNG: http://jsfiddle.net/MxspA/6/.
• Same demo with IE7 support: http://jsfiddle.net/MxspA/9/ (replaces :before and :after with extra elements).

Source for IE8+ Version

<div id="box">
    <div id="knockout"></div>
</div>

#box{ 
    position: relative; 
}

#knockout {
    background-image: url(http://i.stack.imgur.com/AXHM0.png);
    width: 105px;
    height: 180px;
    margin: 0 auto;    
}

#knockout:before{
    content: " ";
    position: absolute;
    left: -52px;
    width: 50%;
    height: 100px;
    background-color: #000;
}

#knockout:after{
    content: " ";
    position: absolute;
    right: -52px;
    width: 50%;
    height: 100px;
    background-color: #000;
}

Images

Here's a transparent PNG to get you started. Someone with basic Adobe Illustrator skills could recreate this as an SVG image, providing the aforementioned high resolution capabilities. An SVG will work nicely as a background image.

Answer 3

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

**HTML**
<div class="main">
  <div></div>
</div>

**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

}

Answer 4

EDIT: extended my demo with the help of @yentups posted fiddle again.

I played around a bit with radiant gradients and came up with the following. You have to play around a bit and get used to the syntax of radial gradients. It's late for me now, I won't wrap my head around this now. Good luck!

Demo: http://jsfiddle.net/5VDLX/

HTML:

<div class="container">
    <div class="shape"></div>
    <div class="circle"></div>
</div>

CSS:

body{
    background: yellow;
}
.shape {
    width: 500px;
    height: 75px;
    background-color: transparent;
    background-image: -webkit-radial-gradient(50% 100%, circle, transparent 50px, black 0);
    background-image: radial-gradient(50% 100%, circle, transparent 50px, black 0);
}
.circle {
    width: 100px;
    height: 100px;
    background-color: transparent;
    border: 2px solid red; /* red for demonstration */
    border-radius: 50px;
    margin: -51px 0 0 199px; /* considering borders */
}

• Browser support for CSS3 gradients http://caniuse.com/#feat=css-gradients
• Browser support for CSS3 background-image options http://caniuse.com/#feat=background-img-opts

Answer 5

It may be possible with a CSS-alpha mask: https://caniuse.com/#feat=css-masks

update 1

• Create a DIV-layer ontop
• Insert a CANVAS-element. Paint the black parts black, the rest should be transparent.

update 2

I am pretty sure, that there is no way to create this layout without using PNG-images with an alpha-layer in older browser.