Transparent Hollow or Cut Out Circle

Transparent hollow or cut out circle

You can achieve a transparent cut out circle with 2 different techniques :

1.SVG

The following examples use an inline svg. The first snippet uses the mask element to cut out the transparent circle and the second hollow circle is made with a path element. The circle is made with 2 arc commands :

With the mask element :

body{background:url('https://farm9.staticflickr.com/8760/17195790401_ceeeafcddb_o.jpg');background-size:cover;}

<svg viewbox="0 0 100 50" width="100%">
  <defs>
    <mask id="mask" x="0" y="0" width="80" height="30">
      <rect x="5" y="5" width="90" height="40" fill="#fff"/>
      <circle cx="50" cy="25" r="15" />
    </mask>
  </defs>
  <rect x="0" y="0" width="100" height="50" mask="url(#mask)" fill-opacity="0.7"/>    
</svg>

Multiple transparent circles using only css (cutouts)

Just use an svg. Black part of mask is removed from the element it is applied to and white is kept:

html, body {  height: 100%;  margin: 0;  background: linear-gradient(to top, red, blue);}
svg {  display: block;  width: 150px;}

<svg viewBox="0 0 150 150">  <mask id="circles" maskUnits="objectBoundingBox">    <rect x="0" y="0" width="100%" height="100%" fill="white" />    <circle cx="40" cy="40" r="15" fill="black" />    <circle cx="80" cy="40" r="15" fill="black" />    <circle cx="70" cy="80" r="15" fill="black" />  </mask>    <rect x="0" y="0" width="100%" height="100%" fill="green" style="mask: url(#circles)" /></svg>

Div with a transparent cut out circle

In order to have the white cut out circle transparent and let the background show through it, you can use box-shadows on a pseudo element to minimize markup.

In the following demo, the blue color of the shape is set with the box shadow and not the background-color property.

DEMO

output:

Div with cut out half-circle

This can also be responsive: demo

HTML:

<div></div>

CSS:

div {
  width: 300px;
  height: 300px;
  position: relative;
  overflow: hidden;
}

div::before {
  content: '';
  position: absolute;
  bottom: 50%;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  box-shadow: 0px 300px 0px 300px #448CCB;
}

CSS transparency hollow circle in corner of box

I am not sure to fully understand your question.
Anyway is this what you want :

https://codepen.io/Scipionh/pen/XVzeQQ

Here is the css (in sass) :

.text {
  height: 200px;
  width: 100px;
  background-color: yellow;
  position: relative;
  &::after {
    content:'';
    border-radius: 100px;
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: green;
  }
}

Transparent half circle cut out of a div

May be can do it with CSS :after pseudo property like this:

body {  background: green;}
.rect {  height: 100px;  width: 100px;  background: rgba(0, 0, 0, 0.5);  position: relative;  margin-top: 100px;  margin-left: 100px;}
.circle {  display: block;  width: 100px;  height: 50px;  top: -50px;  left: 0;  overflow: hidden;  position: absolute;}
.circle:after {  content: '';  width: 100px;  height: 100px;  -moz-border-radius: 100px;  -webkit-border-radius: 100px;  border-radius: 100px;  background: rgba(0, 0, 0, 0);  position: absolute;  top: -100px;  left: -40px;  border: 40px solid rgba(0, 0, 0, 0.5);}

<div class="rect"> <span class="circle"></span></div>

Opaque Semi-transparent overlay with transparent circle

You can achieve this by create a circle with large box-shadow values:

.circle {
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.7);
  border-radius: 100%;
  height: 150px;
  width: 150px;
}

* {box-sizing: border-box;}
body {  min-height: 100vh;  padding: 10px;  margin: 0;}
.popup {  justify-content: center;  flex-direction: column;  align-items: center;  position: absolute;  overflow: hidden;  display: flex;  bottom: 0;  right: 0;  left: 0;  top: 0;}
.circle {  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.7);  justify-content: center;  flex-direction: column;  align-items: center;  border-radius: 100%;  display: flex;  height: 150px;  width: 150px;}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<p>  Lomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit ametLomem ipsum dolor sit amet</p><div class="popup">  <div class="circle">    <button type="button" class="btn btn-success">Add Service</button>  </div></div>

how can I create a transparent circle inside a div(rectangle) using pure css?

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;
}

Transparent Hollow or Cut Out Circle