CODEWITHSUNDEEP
csshtml
Zerium
Zerium

Reputation: 17333

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

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.

Upvotes: 3

Views: 2836

Answers (5)

J D
J D

Reputation: 174

This solution does not work in all browsers (IE currently does not support clip-path).

You can see it in use here

(Here's another version showing the layers)

It uses clip-path to cut a hole out of a div (the gray div in your case), show the transparent div and under the transparent div is the text.

The main code to create the cutout is as follows.

#test {
  -webkit-clip-path: polygon(
    0 0,
    70px 0,
    70px 150px,
    150px 150px,
    150px 70px,
    70px 70px,
    70px 0,
    200px 0,
    200px 200px,
    0 200px,
    0 0
  );
  clip-path: polygon(
    0 0,
    70px 0,
    70px 150px,
    150px 150px,
    150px 70px,
    70px 70px,
    70px 0,
    200px 0,
    200px 200px,
    0 200px,
    0 0
  );

  height: 200px;
  width: 200px;
  background-color:red;
  position:absolute;
  left: 0;
  right: 0;
}

You can create any shape you want with some practice and graph paper or using a clip-path tool.

An example of my poor art skills using a custom polygon tool.

Upvotes: 1

chanjarster
chanjarster

Reputation: 526

I think there is an another way to make a hole on div.

Define a very very wide border of a div and then you will have a "hole"

like this : http://jsfiddle.net/chanjarster/pG9Uy

Upvotes: 1

chanjarster
chanjarster

Reputation: 526

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.

Upvotes: 1

webCoder
webCoder

Reputation: 2222

your question doesn't clear but i think you are looking for opacity

here is demo http://jsfiddle.net/TarQq/3/

hope it will help you.

Upvotes: 0

Dai
Dai

Reputation: 155055

What you're talking about doesn't sound like clipping, but more like opacity.

Just adding the opacity: 0.5; property to your #foreground style rule does the job.

Upvotes: 0

Related Questions