CODEWITHSUNDEEP
htmlcssmask
rgtk
rgtk

Reputation: 3500

Cut off part of element's content

Is it possible to cut off part of div#outer in shape of div#inner? I want to achieve something like this:

Upvotes: 2

Views: 1896

Answers (3)

braican
braican

Reputation: 2202

Try using pseudo elements to attach a transparent element to its parent, with a large border that gives the impression of having a hole:

#outer {
    background:red;
    width:400px;
    margin-left: 60px;
    height:100px;
    position:relative;
}
#inner {
    position:absolute;
    right:-150px;
    top:0;
    bottom:0;
    width:150px;
    overflow:hidden;
}
#inner:after {
    content:"";
    width:30px;
    height:30px;
    display:block;
    border:red 50px solid;
    position: absolute;
    top:-20px;
    left:0;
}

http://jsfiddle.net/PMSdG/3/

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195982

If it just for a background image to show through the hole, then you can use the same image for the background of the #inner div and set its background-attachment to fixed

Something like 

<div id="outer">
  <div id="inner">div#inner</div>
  div#outer
<div>

and

body{background:url('someimage') 0 0 no-repeat;}

#inner{
  background:url('someimage') 0 0 no-repeat fixed;
}

Demo at http://codepen.io/gpetrioli/pen/GsBbd
(contains some javascript to move the div around, just click and drag)

Upvotes: 3

SharkofMirkwood
SharkofMirkwood

Reputation: 12621

You can use mask-image with an image of the shape you need to cut out, for example:

mask-image: url(mask-image.png);

However I'm not sure how it works with IE. Check here for more details on mask-image property;

Upvotes: 1

Related Questions