CSS Shape masking with image

Question

Is it possible to mask the shapes of a div with this image ?

This is what I'm trying to achieve:

This is what I have done so far, using the SVG tag. But it isnt giving me the exact output:

Code

<svg viewBox="0 0 643 525">
  <defs>
    <clipPath id="shape">
      <rect width="150" height="200" style="fill:rgb(0,0,255);stroke-width:5" />
      <rect x="160" y="100" width="150" height="100" style="fill:rgb(0,0,255);stroke-width:5" />
      <rect x="50" y="210" width="100" height="80" />
      <rect x="160" y="210" width="225" height="190" />
    </clipPath>
  </defs>
  <image width="643" height="343" clip-path="url(#shape)" xlink:href="../assets/images/crain.png" x="-50"></image>
</svg>

Other than changing the coordinates, and recognising that you need a polygon instead of a rectangle for the upper left square, what did you want our help with, what’s the problem you’re having? — David Thomas, Dec 17 '19 at 14:05
@DavidsaysreinstateMonica , The the original image the bottom right image is overlapping with the top right image ,I am not able to recreate that ,Because the stoke property doesnt seem to work — Thanveer Shah, Dec 17 '19 at 14:24

Temani Afif · Accepted Answer · 2022-06-18T09:30:28.690

Using CSS mask you can do this:

body {
  margin:0;
  background:grey;
}  
img {
  --_m:
    /* top right part*/
    linear-gradient(#000 0 0) calc(82% + 10px) calc(33% - 10px)/35% 25%,
    /* bottom left part*/
    linear-gradient(#000 0 0) calc(34% - 10px) calc(80% + 10px)/25% 25%,
    /* Top left part */
    linear-gradient(#000 0 0) top left/calc(50% - 10px) calc(50% + 30px),
    linear-gradient(#000 0 0) top left/calc(50% + 10px) calc(50% - 10px),
    /* Bottom right part*/
    linear-gradient(#000 0 0) bottom right/50% 50%;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}

<img src="https://picsum.photos/id/1028/300/300" >

You can add CSS variables to control the gap

body {
  margin:0;
  background:grey;
}  
img {
  margin:5px;
  --g: 10px; /* the gap */
  --_m:
    /* top right part*/
    linear-gradient(#000 0 0) calc(84.5% + var(--g)) calc(33.5% - var(--g))/35% 25%,
    /* bottom left part*/
    linear-gradient(#000 0 0) calc(34% - var(--g)) calc(80% + var(--g))/25% 25%,
    /* Top left part */
    linear-gradient(#000 0 0) top left/calc(50% - var(--g)) 60%,
    linear-gradient(#000 0 0) top left/55% calc(50% - var(--g)),
    /* Bottom right part*/
    linear-gradient(#000 0 0) bottom right/50% 50%;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}

<img src="https://picsum.photos/id/1028/300/300" style="--g:20px">

<img src="https://picsum.photos/id/90/250/250" >

<img src="https://picsum.photos/id/102/200/200" style="--g:4px" >

To understand the trick use the gradient as background on a div element to see the puzzle. Since I am using white color, the mask will show only the gradient part:

body {
  margin:0;
  background:grey;
}  
.box {
  width:300px;
  height:300px;
  border:1px solid;
  --g:10px; /* the gap */
  background:
    /* bottom left part*/
    linear-gradient(red,red) calc(84.5% + var(--g)) calc(33.5% - var(--g))/35% 25%,
    /* bottom left part*/
    linear-gradient(blue,blue) calc(34% - var(--g)) calc(80% + var(--g))/25% 25%,
    /* Top left part */
    linear-gradient(green,green) top left/calc(50% - var(--g)) 60%,
    linear-gradient(yellow,yellow) top left/55% calc(50% - var(--g)),
    /* Bottom right part*/
    linear-gradient(purple,purple) bottom right/50% 50%;
  background-repeat:no-repeat;
}

<div class="box"></div>

To understand the logic behind all the percentage value I am using check this: Using percentage values with background-position on a linear-gradient

CSS Shape masking with image

1 Answers1