0

I tried, but without success:

HTML:

<svg>
    <defs
     id="defs2">
    <clipPath
       clipPathUnits="userSpaceOnUse"
       id="clipping">
      <path d="M0 0.5L20 21.5V103L0 124V0.5Z"/>
    </clipPath>
  </defs>
</svg>

<div class="left-notch">
  <div class="jyn">Jyn Erso</div>
</div>

CSS:

.jyn {
  background-color: rgba(237, 237, 237, 0.5);
  color: black;
  padding: 10px;
}

.left-notch
{
    background-image: url(https://static.independent.co.uk/s3fs-public/thumbnails/image/2016/12/17/12/felicity-jones-jyn-erso.jpg);
    background-size: cover;
    border-top: 4px solid #BE002D;
    clip-path: url(#clipping);
    height: 300px;
    width: 500px;
    margin: 0 auto;
    margin-bottom: 20px;
}

I expected as the image has a transparent Star Wars notch:

enter image description here

But the result, the image is clipped and cut:

enter image description here

Oo'-
  • 203
  • 6
  • 22
  • Use this path instead: `` – enxaneta May 02 '21 at 20:37
  • How to convert to it like you did? Just add `M0 0L0` and `5V300H500V0H0z`? – Oo'- May 02 '21 at 22:14
  • The basic idea is that those parts of the image that are outside of the clipping path are not drawn. You will see only the image under the clipping path. To understand better please draw the above path by copying in inside an svg element with the width and the height of the image or bigger – enxaneta May 03 '21 at 07:02

1 Answers1

2

Use the polygon

.jyn {
  background-color: rgba(237, 237, 237, 0.5);
  padding: 10px;
}

.left-notch {
  /* adjust this */
  --a:40px; /* control the height*/
  --b:10px; /* control the curve */
  --c:15px; /* control the width */
  /**/
  background: url(https://static.independent.co.uk/s3fs-public/thumbnails/image/2016/12/17/12/felicity-jones-jyn-erso.jpg) center/cover;
  border-top: 4px solid #BE002D;
  clip-path: 
    polygon(0 0,100% 0,100% 100%,0 100%,
    0 calc(50% + var(--a)),var(--c) calc(50% + var(--a) - var(--b)),
    var(--c) calc(50% - (var(--a) - var(--b))),0 calc(50% - var(--a)));
  height: 300px;
  width: 500px;
  margin: 0 auto;
}

body {
 background:pink;
}
<div class="left-notch">
  <div class="jyn">Jyn Erso</div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
  • Is it responsive? I mean to reduce the notch size on tablet and mobile phone. I also want to know if I can move to the right, top or bottom. – Oo'- May 02 '21 at 22:13