htmlcsssvg

How can I combine a circle in a polygon using clip-path and add a shadow


I am new to using the css property clip-path and have created a shape that almost fits the requirement I have.

I am looking to create the following shape however struggling to convert the squares I have to circles.

enter image description here

.ticket {
  background-color: blue;
  height: 100px;
  width: 200px;
  border-radius: 10px;
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
  clip-path: polygon(
  0 0,
  0% 42%,
  5% 42%,
  5% 58%,
  0 58%,
  0 100%,
  100% 100%,
  100% 58%,
  95% 58%,
  95% 42%,
  100% 42%,
  100% 0
  );
}
<div class="ticket"></div>

Is this possible using this property? If not, how could I achieve this using a SVG instead? Is it also possible to add a drop shadow to this clipped mask? As you can see in the snippet the shadow doesn't really work.


Solution

  • It is possible to 'cut holes' using the mask-image property and radial-gradients.

    This snippet uses your code but replacing the clip-path with circle radial-gradient masks. Obviously you can change the percentages depending on hole-size required.

    body {
      background: cyan;
    }
    
    .ticket {
      background-color: blue;
      height: 100px;
      width: 200px;
      border-radius: 10px;
      box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
      --mask1: radial-gradient(circle at 0 50%, transparent 0, transparent 5%, black 5%, black 90%, transparent 90%, transparent);
      --mask2: radial-gradient(circle at 100% 50%, transparent 0, transparent 5%, black 5%, black 90%, transparent 90%, transparent);
      /* webkit needed for Chrome */
      -webkit-mask-image: var(--mask1), var(--mask2);
      mask-image: var(--mask1), var(--mask2);
    }
    <div class="ticket"></div>

    (body has been given a background just to prove that holes have been cut rather than white circles drawn which is what would have happened with pseudo elements).

    The box shadow is more problematic as it gets masked (or clipped as in the question's code). Box-shadow on element with -webkit-mask-image has ideas on putting a shadow on a containing element which has the mask image(s) as background images(s) but putting a shadow into the holes is still a problem. Perhaps just putting a slightly bigger container with gradient gray/transparent backgrounds would do enough, with the 'holes' varying transparent grays rather than just transparent. Seems hacky though.