如何用CSS创建这个形状？

Question

如何使用 CSS 创建它？

这是我到目前为止所拥有的：

div {
    -webkit-clip-path: polygon(0 79%, 60% 78%, 78% 100%, 0 100%);
    clip-path: polygon(0 79%, 60% 78%, 78% 100%, 0 100%);
    background:red;
    height:300px;
    width:500px;
    border-radius: 25x;
}

Answer 1

使用倾斜变换的想法：

.box {
  --r: 20px; /* the radius */
  
  width: 300px;
  height: 50px;
  border-top-left-radius: var(--r);
  position: relative;
  overflow: hidden;
}
.box::before,
.box::after {
  content:"";
  position: absolute;
  background: red;
  transform: skew(40deg); /* adjust this to control the inclination */
  transform-origin: bottom right;
}

.box::before {
  inset: 0 var(--r) 0 0;
  border-top-right-radius: var(--r);
}
.box::after {
  right: .8px;
  bottom: 0;
  width: var(--r); 
  aspect-ratio: 1;
  -webkit-mask: radial-gradient(100% 102% at 100% 0,#0000 97%,#000);
}

<div class=box></div>

Answer 2

另一种解决方案使用

skew

但没有

mask

:

（在 codepen.io 上尝试一下）

body {
    /** Play with these **/
    --border-radius: 60px;
    --height: 50px;
    --width: 200px;
    
    /* Use explicit unit, i.e. 0px */
    --padding-tb: 2em;
    --padding-rl: 2em;
    --background: #ffe600;
    --skew-angle: 45deg;

    --margin: 2em 5em;

    /** ...but not these **/
    --real-border-radius: min(
        calc(var(--height) / 2 + var(--padding-tb)),
        var(--border-radius)
    );
    --real-height: calc(
        var(--height) +
        var(--padding-tb) * 2
    );
    --stop: calc(
        (var(--real-height) / 2) /
        tan(90deg - var(--skew-angle)) +
        var(--real-border-radius)
    );
    --real-width: calc(
        var(--width) +
        var(--stop) * 2 +
        var(--padding-rl) * 2
    );
    --before-width: calc(
        var(--real-width) -
        var(--stop) * 2
    );
    --after-left: calc(
        var(--stop) +
        var(--before-width)
    );
}

.rounded-trapezoid {
    position: relative;
    box-sizing: border-box;
    margin: var(--margin);
    border-radius: var(--real-border-radius) var(--real-border-radius) 0 0;
    height: var(--real-height);
    width: var(--real-width);
    overflow: hidden;
    background:
        linear-gradient(
            to bottom,
            transparent 50%,
            var(--background) 50%
        ),
        linear-gradient(
            calc(90deg - var(--skew-angle)),
            var(--background) calc(
                var(--stop) +
                var(--before-width) / 2
            ),
            #fff var(--real-border-radius)
        );
    padding: var(--padding-tb) var(--padding-rl);
    transition: all 0.5s;

    &::before, &::after {
        content: '';
        position: absolute;
        top: 0;
        height: 100%;
        transform: skewX(var(--skew-angle));
        transition: all 0.5s;
    }

    &::before {
        left: var(--stop);
        border-radius: var(--real-border-radius) var(--real-border-radius) 0 0;
        width: var(--before-width);
        background: var(--background);
    }

    &::after {
        left: var(--after-left);
        border-radius: 0 0 0 var(--real-border-radius);
        width: calc(var(--stop) * 2);
        background: #fff;
    }

    &::before, &::after {
        visibility: hidden;
    }
}

#outline:checked ~ .rounded-trapezoid {
    outline: 1px solid black;

    &::before {
        outline: 1px solid red;
    }

    &::after {
        outline: 1px solid green;
    }
}

#visibility:checked ~ .rounded-trapezoid {
    &::before, &::after {
        visibility: visible;
    }
}

<label for="outline">Outline:</label>
<input type="checkbox" id="outline">
<br>
<label for="visibility">Pseudo-elements' visibility:</label>
<input type="checkbox" id="visibility" checked>

<div class="rounded-trapezoid"></div>