如何创建div的自定义Notch？

Question

我正在尝试在div块的左侧添加一个缺口，但是无法做到这一点。

我正在尝试使用此CSS。

 .videoLecture {
    /*right: 1px;*/

    position: fixed;
    cursor: pointer;
    z-index: 256;
    background: #00c1d5;
    height: auto;
    /*bottom: 1px;*/
    border-radius: 10px;
    left: 67.7%;
    top: 26%;
    width: 250px;
    padding: 3px;
}

我将这些行添加到div块中。

clip-path: polygon(24% 0, 95% 20%, 100% 100%, 0 40%);
position: relative;
height: 18px;
background: transparent;
float: left;

Output I am getting Expected Output.

HTML代码

<div class="">
            <div id="player"></div>
            <video id="lecturevideoPlayer" class="video-js  vjs-16-9 vjs-default-skin" preload="auto" autoplay
                   controls
                   poster="{{ activity.get_image_url }}">
                <source src="{{ videoURL }}" type='video/mp4'>
                <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading
                    to a web browser that
                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports
                        HTML5 video</a>
                </p>
            </video>
        </div>