使用 CSS 重新创建形状

Answer 1

对于CSS，弯曲的形状通常是通过使用 圆角 (边界半径) 或径向渐变 （径向渐变）。 互联网上有各种文章对此进行解释，例如：
https://css-tricks.com/how-to-create-wavy-shapes-patterns-in-css/

另一种方法是混合具有极高对比度的两个渐变（一个水平，一个垂直）。 效果晦涩难懂，有点粗糙；您可能需要尝试使用属性来正确塑造曲线。 但它确实很紧凑。在最基本的形式中，您所需要的就是：

background-image:
    linear-gradient(to bottom, #3e3e3e, #c1c1c1),
    linear-gradient(to right, black 65%, white 75%);
background-blend-mode: hard-light, normal;
filter: contrast(99);

这是一个完整的演示：

.tabstrip {
    background-image:
        linear-gradient(to bottom, #3e3e3e, #c1c1c1),
        linear-gradient(to right, black 65%, white 72%);
    background-blend-mode: hard-light, normal;
    mix-blend-mode: lighten;
    filter: contrast(99);
    height: 25px;
}

.demo {
    background: linear-gradient(#555, #333);
    border: thin black solid;
    color: green;
    position: absolute;
    width: 90%;
}

.above {
    color: white;
    padding: 2px;
}

.under {
    background: white;
    color: black;
    padding: 2px;
}

.left {
    color: white;
    left: 0;
    padding: 2px;
    position: absolute;
    z-index: 1;
}

.right {
    color: black;
    right: 0;
    padding: 2px;
    position: absolute;
    z-index: 1;
}

<div class="demo">
<div class="above">Above tabstrip</div>
<div class="left">Left</div>
<div class="right">Right</div>
<div class="tabstrip"></div>
<div class="under">Underneath tabstrip</div>
</div>