css 样式求助？

这个效果我实在写不出来了，右上角是怎么实现的求助

 position: absolute;
        top: 80px;
        left: 15px;
        width: calc(100% - 30px);
        height: 150px;
        background-color: #57b6c6;
        background-image: linear-gradient(213deg, #6ac467 0%, #6fc96e 50%, #93ec94 100%);
        border-radius: 10px;
        z-index: 3;
        box-shadow: -1px 6px 9vw 5px #4cd8724d;
        overflow: hidden;
        clip-path: polygon(0% 15%, 0 0, 15% 0%, 52% 0, 63% 24%, 100% 24%, 100% 85%, 100% 100%, 85% 100%, 15% 100%, 0 100%, 0% 85%);

clip-path 是有缺口的但是。角很生硬并没有像图片上那个圆滑有弧度

阅读 920

参考了 stackoverflow - How to round out corners when using CSS clip-path, 只能实现到这种程度了:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: grey;
        }

        .container {
            /* svg 的 stdDeviation 属性的值应该与 --std-deviation 一致 */
            --std-deviation: 12px;
            --left-radius: 8px;
            --right-width: 43%;
            --right-height: 40%;
            --right-radius: calc(var(--left-radius) + var(--std-deviation));

            position: relative;
            width: 500px;
            height: 100px;
        }

        .left {
            filter: url('#goo');
            display: inline-block;
            width: 100%;
            height: 100%;
        }

        .left::before {
            content: "";
            display: block;
            height: 100%;
            clip-path: polygon(0% 50%, 0 0, 50% 0%, calc(100% - var(--right-width)) 0, calc(100% - var(--right-width) + 10%) calc(100% - var(--right-height)), 100% calc(100% - var(--right-height)), 100% 50%, 100% 100%, 50% 100%, 50% 100%, 0 100%, 0% 50%);
            background: #6bc974;
            border-radius: var(--left-radius);
        }

        .right {
            position: absolute;
            z-index: -1;
            top: 0;
            right: 0;
            width: var(--right-width);
            height: 100%;
            border-radius: var(--right-radius);
            background: #e7fde9;
        }

        .right::after {
            content: '';
            position: absolute;
            right: 0px;
            bottom: 0px;
            width: 100%;
            height: var(--right-height);
            background-color: #6bc974;
            border-top-right-radius: var(--left-radius);
            border-bottom-right-radius: var(--left-radius);
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="left">
            <svg style="display: none; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg"
                version="1.1">
                <defs>
                    <filter id="goo">
                        <feGaussianBlur in="SourceGraphic" stdDeviation="12" result="blur" />
                        <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9"
                            result="goo" />
                        <feComposite in="SourceGraphic" in2="goo" operator="atop" />
                    </filter>
                </defs>
            </svg>
        </div>
        <div class="right"></div>
    </div>
</body>

</html>

css 可真难啊

css 样式求助？

你尚未登录，登录后可以

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

如何自定义设置虚线边框的样式？

前端有没有办法实现页面截图？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？