Develop Reference

Create inverted curved corners in CSS [duplicate]

I have a css code:
-moz-border-radius-topleft:50px;
I get the result:
Is there any possibilities to give like this:

Just to update this, it seems you can in multiple ways.
Lea Verou posted a solution
Here is mine using border-image
Using border image
html
<div><img src="https://s3.amazonaws.com/resized-images-new/23292454-E6CD-4F0F-B7DA-0EB46BC2E548" /></div>
css
div {
width: 200px;
border-width: 55px;
-moz-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
-webkit-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
-o-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
margin: 50px auto;
}
Using radial gradient
Lea Verou's solution
html
<div class="inner-round"></div>
css
.inner-round {
background-image:
radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
}

In modern browsers, you can use mask-image:
#aux-container {
width: 100px;
height: 100px;
background: #f00;
-webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}
<div id="aux-container"></div>
http://jsbin.com/eViJexO/1/
Additionally, take a look at http://www.html5rocks.com/en/tutorials/masking/adobe/, which describes how to achieve similar result using mask-box-image.

You can also use and inline svg with a path element:
body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}
<svg viewbox="0 0 10 10">
<path d="M9 1 V9 H1 V3 Q3 3 3 1" fill="#fff"/>
</svg>
In this example, I use a cubic bezier curve for the inverted round edge.
With this approach, you can also fill the shape with an image or gradient:
body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}
<svg viewbox="0 0 10 6.7">
<defs>
<clipPath id="clip">
<path d="M9 1 V6.7 H1 V3 Q3 3 3 1" fill="#fff"/>
</clipPath>
</defs>
<image xlink:href="http://i.imgur.com/qi5FGET.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#clip)"/>
</svg>

This can be done with a radial gradient.
div {
width: 20vw;
height: 20vw;
background: radial-gradient(circle at top left,transparent 4vw, darkblue 4.1vw);
}
<div></div>
Just for fun, additional inverted corners can be added by defining multiple backgrounds - one for each corner:
div {
width: 40vw;
height: 40vw;
position: relative;
background-color: darkblue;
--circle: radial-gradient(circle,white 8vw, darkblue 8.1vw);
}
div:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: var(--circle), var(--circle), var(--circle), var(--circle);
background-size: 18vw 18vw;
background-position: -40% -40%, 140% -40%, -40% 140%, 140% 140%;
background-repeat: no-repeat;
}
<div></div>

Update: There are a plethora of options available now. Check out one of the other answers.
Original answer:
Unfortunately, there is currently not a solution based on official or implemented CSS Specs :(
However, as other people have added, there are possible solutions (or cheats?) you can do to achieve the same effect using JS libraries or complex HTML/CSS implementations. I came across this issue whilst looking for a way to make even more complex corners than the OP without using images.
I have filed a bug (Feature Request) over at the webkit site - as there does not appear to be one filed already.
Bug 62458 - Feature Request: Inverse rounded corners

For a plain background-color, you actually can, using pseudo element and box shadow to draw background-color instead, and it will not hide backgrounds of parent's container, you will actually see them through.
What you need is a browser that understands :before/:after and box-shadow :) ...
For IE8 , you can draw hudge borders instead shadows. http://codepen.io/anon/pen/fFgDo
box-shadow approach : http://codepen.io/anon/pen/FwLnd
div {
margin:2em; /* keep it away from sides to see result */
padding:2em;/* for test to size it when empty */
position:relative; /* reference to set pseudo element where you wish */
overflow:hidden;/* you do not want the box-shadow all over the page */
}
div:before {
content:'';
position:absolute;
width:80px;
height:80px;
top:-40px;
left:-40px;
border-radius:100%;
box-shadow:0 0 0 2000px #1D005D;/* here draw the shadow inside its parent , maybe z-index will be required for content */
}
pseudo element can take any shape, and transform via css and set any where in its element to draw kind of holes through : examples : http://codepen.io/gc-nomade/pen/nKAka

I made an online generator to easily get the code of any combination you want: https://css-generators.com/custom-corners/
A few examples:
.one {
--mask: radial-gradient(40px at 40px 40px,#0000 98%,#000) -40px -40px;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.two {
--mask:
radial-gradient(40px at 0 0,#0000 98%,#000) 0/51% 100% no-repeat,
radial-gradient(40px at 100% 100%,#0000 98%,#000) 100%/51% 100% no-repeat;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.three {
--mask:
radial-gradient(60px at 60px 60px,#0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000) -60px -60px,
linear-gradient(90deg,#000 20px,#0000 0) -10px 50% /100% calc(100% - 120px + 10px) repeat-x,
linear-gradient( #000 20px,#0000 0) 50% -10px/calc(100% - 120px + 10px) 100% repeat-y;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.four {
--mask: radial-gradient(60px at 0 0,#0000 98%,#000);
-webkit-mask: var(--mask);
mask: var(--mask);
}
.five {
--mask:
radial-gradient(60px at 100% 0,#0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000),
conic-gradient(from 90deg at 10px 10px,#0000 25%,#000 0) 0 0/calc(100% - 60px + 10px) 100% repeat-y,
conic-gradient(at bottom 10px right 10px,#000 75%,#0000 0) 0 100%/100% calc(100% - 60px + 10px) repeat-x;
-webkit-mask: var(--mask);
mask: var(--mask);
}
.box {
width: 150px;
aspect-ratio:1;
display:inline-block;
background:linear-gradient(red,blue);
}
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>

There are ways you could solve this issue by using just CSS - however it would depend on the colour of your background (if solid its easier) if you have a pattern for background it might be slightly more complex.
I cover a basic example here of how to make an Inverse Border Radius in CSS (here). This uses a trick with the size of Border to use the inside, you might have to do some positioning to get it to work properly however as you can see its possible. Especially if you specify a background-color for each span.
If you want all 4 corners you would have to add a separate class for each span inside your div, and each class would simulate a corner, top left, top right etc.

No.
If you have solid background you can probably use css to create the bite.
Otherwise, there isn't anything special you can do beyong using PNGs, much like you'd create round corners before border-radius.

actually there's one way, like this:
<div style="background-color: red;height: 12px; width: 12px;">
<div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
</div>
</div>
but as #Domenic says you'll need a solid background, otherwise you'll get this:
<div style=" background-color:#666">
<div style="background-color: red;height: 12px; width: 12px;">
<div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
</div>
</div>

Show only half of SVG

I'm showing my SVG image in the card
<div class="card-image">
<img src="/images/linux.svg" />
</div>
I couldn't upload the SVG file here, but what I'd like to do is: (After an event is triggered)
Show the full original SVG in the beginning, but when an action is taken, only left or right half of the SVG image is shown in color, but the other half is in grayscale.
I want to be able to adjust the rotation so that I can choose the angle at which the image is grayed out.
Can someone point me to the right direction?

You can set a pseudo element on the container, and set a gradient to this pseudoelement that is transparent for half of it, a gray for the other half. The linear gradient can be set at the angle the you want
.card-image {
width: 200px;
height: 300px;
display: inline-block;
position: relative;
}
.grayed:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
z-index: 9;
background-image: linear-gradient(110deg, transparent 50%, #888a 50%);
}
<div class="card-image">
<img src="http://placekitten.com/200/300" />
</div>
<div class="card-image grayed">
<img src="http://placekitten.com/200/300" />
</div>
.card-image {
width: 600px;
height: 400px;
display: inline-block;
position: relative;
overflow: hidden;
}
.grayed:after {
content: "";
position: absolute;
width: 200%;
height: 200%;
left: 50%;
top: -50%;
z-index: 9;
background-color: white;
mix-blend-mode: color;
transform: rotate(30deg);
transform-origin: left center;
animation: rotate infinite 10s linear;
}
#keyframes rotate {
from { transform: rotate(0deg);}
to { transform: rotate(360deg);}
}
<div class="card-image grayed">
<img src="http://placekitten.com/600/400" />
</div>

You can use CSS to add linear gradients on images.
background-image:
linear-gradient(to bottom, rgba(x, y , w, z ), rgba(a, b, c, d)),
url('image.jpg');
You could then use javascript to modify the style in the class, this could allow you to change properties such as colors, however, I am not exactly sure which property would control where the gradient start, but it's a good pointer if you need one. If you can find a way to select where the gradient start (in relation to, an offset for example, or maybe specific height) you could then have it be black and white and use JS to modify the position/color.

How can I center my clip-path's text relatively to the viewport and display all the clip-path's text?

Here my React component demo: https://codesandbox.io/s/epic-brown-osiq1, I am now using the viewBox's values, getBBox and getBoundingClientRect() to realize some calculations in order to position my element. Currently I have entered raw value based on the return the console have provided me from the getBoundingClientRect()'s logs. You can see it on the element I have implemented the getBoundingClientRect() on, namely the <svg>'s root element and the clip-path's text's element. Better but the text is more place tower the center of the screen that really aligned on center of the text's box-you can see the "So"'s word is at the start of the "Food"'s word instead of being aligned on the box's center. So I am at this point currently. Thanks for the feedback.*
note: You will see some comments providing information or parts of my former trials inside the sandbox.
What my code does ? concretely I display a clip-path's text with some animated panel travelling the clip-path - this is the color_panel_group's element- giving some dynamic to the composition.There is also a shadow behind the text to give some depth to the composition.
Expectation: display a clip-path's text responsively positioned at the vertical and horizontal's centers of the viewport.
Problem: My clip-path hides a part of the text and my trials to center the element relative to viewport fails to be fructuous.
What I have tried: I have tried to play with the width of the element and the x's positions of the element -mainly text, clip-path, symbol and both case. Even tried to play with the use element by implementing some class in it, but at the end of the day very approximative result outcomed. Also In tspan and symbol I have tried to play with x's attribute, again with very approximative outcomes. I have tried to play with position absolute and a relative container -mainly on the SVG's CSS selector directly-, still with approximative outcomes.
I am wondering what I am missing. Maybe someone can bring some explanation on my code's behavior?
Here my second presentation's resulting code (approximately what React component produces):
body {
background: orange;
}
svg {
background: green;
display: block;
margin: auto;
position: relative;
z-index: 2;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.component {
min-width: 100vw;
min-height: 100vh;
font-size: 100%;
}
.fade_in_background {
opacity: 1;
visibility: visible;
transition: all 1.5s ease-out 0s;
}
.brandtype {
margin: auto;
text-align: center;
}
.brandtype_use {
position: absolute;
transform: translate(-112.65px, 0)
}
.clipPath_text {
text-align: center;
}
.color_panel_group {
padding: 25px;
}
.shape_animation {
transform-origin: 0;
transform: scale(0, 1) translate(0, 0);
animation: moving-panel 3s 1.5s 1 alternate forwards;
}
.shadow {
transform: translate(10px, 10px)
}
.shape_animation_shadow {
fill: black;
fill-opacity: .505;
transition: all 1.3s ease-out 0.3s;
}
.brandtype {
font-size: 6.8em;
}
#keyframes moving-panel {
to {
transform: scale(1, 1) translate(20px, 0);
}
}
<div class="component">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 965 657">
<defs>
<symbol id="panel_animation" y="0">
<clipPath class="clipPath_text" id="clipPath_text"><text class="brandtype" word-spacing="-.45em">
<tspan x="0%" y="50%" dy="1.6em">So</tspan>
<tspan x="0%" y="50%" dy="3em">Food</tspan>
</text></clipPath>
<g class="shadow" clip-path="url(#clipPath_text)">
<rect class="shape_animation shape_animation_shadow" width="100%" height="100%" x="-25px">
</rect>
</g>
<g class="color_panel_group" clip-path="url(#clipPath_text)">
<rect class="shape_animation" fill="#F2385A" width="100%" height="100%"></rect>
<rect class="shape_animation" fill="#F5A503" width="80%" height="100%"></rect>
<rect class="shape_animation" fill="#E9F1DF" width="60%" height="100%"></rect>
<rect class="shape_animation" fill="#56D9CD" width="40%" height="100%"></rect>
<rect id="shape_animation_ref" class="shape_animation" fill="#3AA1BF" width="20%" height="100%" x="-25px">
</rect>
</g>
</symbol>
</defs>
<rect width="100%" height="100%" filter="url(#background_light)"></rect>
<use width="500px" height="100%" x="50%" xlink:href="#panel_animation" class="brandtype_use"></use>
</svg>
</div>
Thanks for any hint.

Text alignment in SVG does not work the way we are used to from HTML and CSS where everything is box with some dimensions and we can apply e.g. text-align: center.
In <svg:text> the starting coordinates define point from which will text line expand.
text-anchor attribute controls which direction this expansion will occur: center value means it will expand both ways so the initial anchor point will be in the middle of bounding box width (for horizontal writing systems). See excellent answer illustrating this text-anchor as the best mean for centering text in SVG: https://stackoverflow.com/a/23272367/540955. Also, there is no CSS position properties (left/top) inside SVG, only x/y coordinates, nor margins and rest of box-model as you know it in HTML.
So in your code adding text-anchor="middle" and moving the x coordinates further right would produce centered text. I'd advise to use bare <text> elements as opposed to <tspan>s, because shifting them with dx/dy is relative to the last preceding character and this character could be some white space from parent <text> (depending on code formatting) what would produce unbalanced centering. Also for easier calculations dominant-baseline="central" (or just middle for horizontal writing systems) is useful, because it moves the anchor point from the base line to "center line".
So using dy attribute (as you already do) to move the first line "one half" of line-height up and the other down should do the trick:
<svg viewBox="0 0 800 200" text-anchor="middle" dominant-baseline="central" font-size="100">
<!-- Outline and diagonals with center point for illustration: -->
<path d="M0,0h800v200h-800zl800,200m0 -200L0,200" fill="#FC9" stroke-width="1" stroke="rgba(0,0,0,0.3)"></path>
<circle cx="50%" cy="50%" r="10" fill="red"></circle>
<!-- Centered text: -->
<text x="50%" y="50%" fill="rgba(0,0,0,0.3)">So</text>
<!-- Shifted up and down: -->
<text x="50%" y="50%" dy="-0.5em">So</text>
<text x="50%" y="50%" dy="+0.5em">Food</text>
</svg>
(Not entirely related: the clipping could be done in CSS only with background-clip: text; here is rough variation of your design as it appears in Chrome browser, with animated text background, but without shadows. Unfortunately adding shadows would require more elements or attributes, I think. This should work in any browser supporting background-clip.)
div {
display: flex;
flex-direction: column;
align-items: center;
font-size: 30vh;
line-height: 30vh;
font-weight: bold;
font-family: Impact;
}
span {
color: #fff;
background-color: #000;
width: 100%;
text-align: center;
}
#supports (-webkit-text-fill-color: transparent) and (-webkit-background-clip: text) {
span {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
animation: 2s wohoo infinite alternate cubic-bezier(1,0,1,1);
background-position: 0 0;
background-size: 100% 100%;
background-color: transparent;
background-image: linear-gradient(
to right,
#f2385a 0,
#f2385a 20%,
#f5a503 0,
#f5a503 40%,
#e9f1df 0,
#e9f1df 60%,
#56d9cd 0,
#56d9cd 80%,
#3aa1bf 0,
#3aa1bf 100%
);
background-repeat: no-repeat;
transform-origin: center center;
}
}
#keyframes wohoo {
from {
background-size: 0 100%;
background-position: -5vh 0;
transform: scale(0.7);
}
50% {
transform: scale(0.7);
}
90% {
transform: scale(0.9);
}
to {
background-size: 500% 100%;
background-position: 0vh 0;
transform: scale(0.9)
}
}
html,body{margin:0;overflow:hidden;}
body {
background-color: #1d1f20;
color: snow;
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
}
<div>
<span>Baz</span>
<span>Gazonk</span>
<span>Qux</span>
</div>

Remove white haze from the outside of a image blurred using CSS

Ok so I have an image which is blurred, and unblurred when the dom is loaded.
<div class="image-wrapper-container2"><div class="image-wrapper orig" style="background-image: url('https://www.w3schools.com/css/img_fjords.jpg'); background-size: cover; background-position: bottom; background-color: #a5a0a5; filter: blur(15px);"></div></div>
But the trouble with this is there is a white haze around the outside of the image.
Here is a fiddle to demonstrate whats going on
As you can see, I tried to remove the haze by using width: 110%;margin-left: -5%;height: 110%;margin-top: -5%; for the second image. but this is not the right solution.
Once the dom is loaded and the image is unblurred the image is outside the div by 5%;
Is there any way I can get the image haze to disappear from around the edge of the image without the image going outside the boundary of the image-wrapper-container2 div element
Cheers

Ok so here is the solution,
As #Kaiido suggested I needed to use the svg filters method.
But for internet explorer I needed to generate a base64 image, with a small resolution. 10px x 10px
Then load the base64 image for internet explorer, which created a blurred effect when the image is streched to fit the container.
For the transition to a non blurred image, I used the SMIL transition for browsers which support it. filter: blur transition for browsers which don't support SMIL and no transition for IE the image is just swapped.
HTML:
<svg width="0px" height="0px"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<filter id="better-blur" x="0" y="0" width="1" height="1">
<feGaussianBlur stdDeviation="25" result="blurred">
<animate id="anim" attributeType="XML" attributeName="stdDeviation" from="25" to="0" begin="indefinite" fill="freeze"
dur="0.35s"></animate>
</feGaussianBlur>
<feMorphology in="blurred" operator="dilate" radius="25" result="expanded"></feMorphology>
<feMerge>
<feMergeNode in="expanded"></feMergeNode>
<feMergeNode in="blurred"></feMergeNode>
</feMerge>
</filter>
</svg>
<div class="image-wrapper orig" style="background-image: url(\'' . esc_url($thePostThumbUrl) . '\'); background-size: cover; background-position: bottom; filter: url(#better-blur);visibility: hidden;"></div>
JAVASCRIPT:
<script type="text/javascript">
if (!jQuery("#anim")[0].beginElement) {
jQuery(".image-wrapper").css("filter", "blur(25px)");
}
</script>
<script type="text/javascript">
jQuery(window).load(function() {
setTimeout(function() {
if (jQuery("#anim")[0].beginElement) {
jQuery("#anim")[0].beginElement();
}
else {
jQuery(".image-wrapper").css("filter", "blur(0px)");
}
}, 1000);
});
</script>
CSS:
.image-wrapper {
transition: 0.25s filter linear;
-webkit-transition: 0.25s filter linear;
-moz-transition: 0.25s filter linear;
-o-transition: 0.25s filter linear;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: block;
}
Thanks Kaiido for all your help :)

There seems to be no way to remove the blurry edge around elements within the filter:blur rule. I would suggest a simple trick instead:
Create two overlapped divs containing the same image, the first one containing an img element with the image, and the second one as an empty div with the same image as a background.
Inside the superior div, insert the image centred inside a bigger wrapper, creating the effect of a border around it, thick enough to contain the blurry edge. Then apply the filter:blur to the whole wrapper, making the blurry edge fit the fake border; then, adjust the dimensions of the image you wish to show, through overflow:hidden.
Via JavaScript, just hide the superior div on load.
setTimeout(function() {
$('.fake-image').hide();
}, 2000);
.fake-image {
overflow: hidden;
width: 560px;
height: 360px;
margin: 0 auto;
position: absolute;
top: 10px;
left: 50px;
z-index: 10;
}
.container-backup{
width: 680px;
height: 480px;
background-color: rgba(255,255,255,0);
filter: blur(15px);
margin-left: -60px;
margin-top: -60px;
}
.image-top img{
padding: 40px;
display: block;
}
.real-bck-image {
position: absolute;
top: 10px;
left: 50px;
overflow: hidden;
width: 560px;
height: 360px;
background-image: url('https://www.w3schools.com/css/img_fjords.jpg');
background-repeat: no-repeat;
background-position: center;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="fake-image">
<div class="container-backup">
<div class="image-top">
<img src="https://www.w3schools.com/css/img_fjords.jpg" alt="">
</div>
</div>
</div>
<div class="real-bck-image"></div>
I hope it helps!
Cheers

Load behind image on other images on boxes CSS jquery

Hello i want to create web theme with this steps:
1 - Set a background image
First Step Image
2 - Set other background image in the end picture
3 - Create circles or boxes and now load the part of image one as boxes background (But how??? this is my question.)
Code:
<style>
#Background_1 {
width: 100%;
height: 100%;
background-image: url("img1.jpg");
background-size: 100% 100%;
z-index: 1;
position: fixed;
}
#Background_2 {
width: 100%;
height: 100%;
background-image: url("img2.jpg");
background-size: 100% 100%;
z-index: 2;
position: fixed;
}
.BoxLoad {
width: 250px;
height: 250px;
margin-left: 15%;
box-shadow: 0px 0px 11px 1px rgba(20, 20, 20, 0.8);
color: #FFFFFF;
border-radius: 50%;
display: inline-block;
font-size:24px;
}
</style>
<body>
<div id="Background_1">
<div id="Background_2">
<div class="BoxLoad">
</div>
<div class="BoxLoad">
</div>
<div class="BoxLoad">
</div>
</div>
</div>
on this source, we have 1 image on background (we can't see it) and 1 other (diff) image on it. and boxes on them. box have no background color and just have shadow with image 2 background. but what i need is to load background 1 as box background (part of background 1 not background 2) while background 1 still is under of back 2. it means if i create an other box anywhere of page with custom new settings, the background of that box was that point of back 1 image.
at the end i need something like this:
End Image (What i want)

You could assign an SVG clip path to your background image. Essentially, you build up the circles as below and then set the clip-path CSS property of the background div like so clip-path: url(#circles);
<svg>
<defs>
<clipPath id="circles">
<circle cx="100" cy="100" r="60" />
<circle cx="300" cy="100" r="60" />
<circle cx="500" cy="100" r="60" />
<circle cx="200" cy="250" r="60" />
<circle cx="400" cy="250" r="60" />
<circle cx="600" cy="250" r="60" />
<circle cx="300" cy="400" r="60" />
<circle cx="500" cy="400" r="60" />
<circle cx="700" cy="400" r="60" />
</clipPath>
</defs>
</svg>
Full fiddle: https://jsfiddle.net/hqss8taj/

You can check this link
The main idea is to put same image (as in background) in Your "step 3 circles" and fix their position to be the same, as background's.
However, It's just simulates transpanence.
Edit: as mentioned #Mike Stringfellow in another answer, You can use SVG clipPath, but it requires HTML5 support.

Create multiple divs for the circle and set the background image for the circle divs. Position the background image to get the desired position.
I have done for the first circle.
To differentiate the circle div with image to the end image you had attached I have used filter. Hope this is what you wanted.
.circle{
background-image: url(http://i.stack.imgur.com/EY480.jpg);
width: 300px;
height: 300px;
border-radius: 50%;
border: solid 1px red;
position: absolute;
-webkit-filter: brightness(200%);
}
.wrapper{
position: relative;
display: inline-block;
}
.circle1{
top: 72px;
left: 183px;
background-position: -183px -72px;
}
.circle2{
top: 152px;
left: 183px;
background-position: -183px -152px;
}
<div class="wrapper">
<img src="http://i.stack.imgur.com/OlmRK.jpg">
<div class="circle circle1"></div>
<div class="circle circle2"></div>
</div>