html - 如何创建 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;

输出我得到 预期的输出。

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>

标签： htmlcssvideo.js