负边框 (css)

Question

我知道如何用 css 制作一个如下所示的边框：

    ___________
  _/           \_
 /               \
|                 |
|                 |

但是是否有可能制作一个看起来像这样的边框：

|\_             _/|
|  \___________/  |
|                 |
|                 |

提前致谢！

Answer 1

使用带有盒阴影的伪元素的解决方案：

div {
    background: orange;
    width: 400px;
    height: 40px;
    margin-top: 100px;
    z-index: 1;
    position: relative;
}

div:after {
    content: "";
    position: absolute;
    height: 100px;
    left: 0px;
    right: 0px;
    bottom: 100%;
    background-color: transparent;
    border-bottom-left-radius: 50% 70px;
    border-bottom-right-radius: 50% 70px;
    box-shadow: 0px 0px 0px 100px orange;
    clip: rect(0px, 400px, 100px, 0px);
}

小提琴