How to 'clip away' part of a div using CSS?


Tags: css,html

Problem :

This is more or less a scaled down version of what I got, but it's not what I want, as I want the green div to be partially transparent, so I'll be able to see whatever content is behind both of these divs (there is none in the example, but there is in my project). But the other div is blocking my view, so how would I 'clip away' part of that div?

Just a thought, there might even be a better method to solve this.

Just in case the link is broken:

HTML:

<div id="foregrounddiv2"></div>
<div id="foregrounddiv"></div>​

CSS:

#foregrounddiv2 {
  background-color:grey;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  position: fixed;
  z-index:2;
}
#foregrounddiv {
  background-color: green;  
  position: fixed;
  z-index: 3;  
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  margin-top: -50px;
  margin-left: -50px;
}  

UPDATE: Sorry for the misunderstanding. The text I was talking about is situated behind both divs. Sorry about the bad naming too. I don't want any opacity on the #foregrounddiv2 div, I just want to be able to see the content through #foregrounddiv. Hope I make sense.



Solution :

What you want is a hole in the grey div and the hole is at the position of green div?

If so, you can not do that directly, you have to make 4 grey divs and arrange their positions to "leave" a hole on the screen.


    CSS Howto..

    How to load Angular.js form to jsFiddle?

    How would I do a two finger drag with javascript/jquery?

    How to create slideshow in css without having to make more than one class?

    How to access CSS children properly?

    How can I get rid of one animation in a media query?

    How to solve divs overlapping issue and maintain css fluid layout?

    How to get slanted borders in CSS

    How do I change a specific css element with javascript?

    How to make ComboBox caption bold in Vaadin?

    How to fill 100% of an absolutely positioned div? (IE7+) [duplicate]

    How to make CSS sourcemapping work in Chrome with Compass (SASS)

    How to add spacing between two rows of multiple divs each

    How to make a themeable web application using CSS?

    How to increase the size of an unicode icon awesome fonts relative to its container with CSS

    using percentages for css text - how do i stop inheritance of font-size from parent

    How to manage magento CSS file with over 10,000 lines?

    How can I use the key name instead of value in map-get?

    How to position div's like this with CSS?

    How to change the font size in table cells according to cells content?

    How to apply a CSS transition only to the transform property

    ng-show/ng-hide breaking CSS animations

    How to use a variable in my href path in html

    How do i make the evenly spread elements in my nav bar not touch the edges of the page?

    How to differentiate the common css class by using other css class

    How to use pseudo-class :target within an image map

    how to design like this form in html

    How to animate 2 parallel lines in order to form an X on click using CSS and JQuery

    How to use a custom Style Sheet in WordPress

    How to get an interactive geographic map for a country? [closed]

    how to change the css in td on mouse click using javascript