CSS边框弯曲 [英] CSS borders bend inside

问题描述

我想在元素内构建具有弯曲边框的容器。是否可以只使用css？如果是容器，应该具有 auto height

解决方案

 ＃
 
  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> 
  

示例

I want to build the container with bended borders inside the element. Is it possible to do using only css? If it is container can should have auto height

解决方案

You can try this method - draw a div with rounded borders before and after your 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

这篇关于CSS边框弯曲的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！