问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css 样式求助？

头像
Asd528099
    382573

    image.png

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

     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 是有缺口的 但是。角很生硬 并没有像图片上那个圆滑有弧度

    前端htmlcss
    阅读 918
    3 个回答
    得票最新
    头像
    42
      3.8k1623
      头像
      Fractal
        5.5k22331
        头像
        ayu_excorcist
          18415

          参考了 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>

          image.png

          css 可真难啊

          查看全部 3 个回答
          推荐问题
          宣传栏