1
    >
  1. example

=======

if i place that div(rectangle) over any other element(say an image).the image should be visible only through the circle inside of that div(rectangle).

Harry
  • 87,580
  • 25
  • 202
  • 214
  • 1
    Can you please elaborate what you exactly want? Right now your question is ambiguous. – Mohammad Usman Nov 01 '16 at 05:37
  • i want to create a transparent circle(r=30px) inside of a rectangle(200px*100px) at the center of the rectangle. –  Nov 01 '16 at 05:46

1 Answers1

0

As Muhammad commented your question is a little vague (and not very well formatted), but it sounds like you're after a clipping "mask" layer using the clip-path css rule?

Here's a codepend showcasing the CSS clip-path - http://codepen.io/chriscoyier/pen/02e4ebad4c8d3beeb0dc4781a811a37c

And heres the corresponding article - https://css-tricks.com/clipping-masking-css/

The only other interpretation of your question that I can think of is a basic border radius rule on the div with overflow set to hidden.

.rectangle {
  background-image: url(yourimage.jpg);
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

EDIT: As you've now stated your intentions in the comments section. You can achieve a clipping mask by using pseudo elements on your div element like so:

.rectangle {
   position: relative;
}
.rectangle:after {
   content: "";
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate3d(-50%,-50%,0);
   width: 30px;
   height: 30px;
   border-radius: 30px;
   background-image: url(yourimage.jpg);
   background-size: 200px 100px;
}
Jesse
  • 429
  • 6
  • 12
  • Hey can you explain it briefly! –  Nov 02 '16 at 01:53
  • Do you mean the overflow hidden solution or the clip-path solution? The :after rule creates a pseudo element that we can position absolutely relative to the parent element. Which for pseudo elements are themselves. We then fake the background by making it the same size as the .rectangle div while only showing a 30px circle of it. – Jesse Nov 07 '16 at 05:45