html - CSS 边框向内 flex

Question

我想在元素内部构建带有 flex 边框的容器。可以只使用 css 吗？如果是容器可以有 auto 高度

Answer 1

你可以试试这个方法——在你的div前后画一个圆边的div

CSS:

#bend-inside{
    width: 500px;
    overflow: hidden;
}

#box-before{
    background-color: white;
    border-radius: 600px;
    height: 600px;
    width: 600px;
    display: inline-block;
    position: absolute;
    z-index: 2;
   right: 550px;
    top: -200px;
    overflow: hidden;
}

#box{
    background-color: #e5e5e5;
    width: 400px;
    height: 200px;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    right: 200px;
}

#box-after{
    background-color: white;
    border-radius: 600px;
    height: 600px;
    width: 600px;
    display: inline-block;
    position: absolute;
    z-index: 2;
    right: -350px;
    top: -200px;
    overflow: hidden;
}

HTML:

<div id="bend-inside">
    <div id="box-before"></div>
    <div id="box"></div>
    <div id="box-after"></div>
</div>

Example