CSS borders bend inside

问题

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

回答1:

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

回答2:

u can use this technique:

HTML:

<div class='continer'>
    <div class='left'></div>
    <div class='right'></div>
</div>

CSS:

.continer{
    width:500px;
    height:200px;
    background:red;
}
.right{
    float:right;
    width:10%;
    height:120%;
    border-radius:100%;
    margin-top:-5%;
    margin-right:-4%;
    background:white;
}
.left{
    float:left;
    width:10%;
    height:120%;
    border-radius:100%;
    margin-top:-5%;
    margin-left:-4%;
    background:white;
}

example here: http://jsfiddle.net/NSm8M/

回答3:

If you are looking for a pure CSS solution, then one option could be to use ::before and ::after pseudo-elements at achieve something similar.

Demo: http://jsfiddle.net/abhitalks/2mx6b/

HTML:

<div class="curved"></div>

Relevant CSS:

.curved {
    width: 400px;
    height: 200px;
    background-color: #ccc;
    border-radius: 0 0 35% 35%;
    position: relative;
}
.curved::before {
    height: 200px;
    width: 40px;
    border-radius: 0 40% 50% 0;
    content: '';
    position: absolute;
    top: 0px; left: 0px;
}
.curved::after{
    height: 200px;
    width: 40px;
    border-radius: 40% 0 0 50%;
    content: '';
    position: absolute;
    top: 0px; right: 0px;
}

Update:

Another method could be to use radial-gradient. This would get rid of the pseudo-elements altogther. However, the downside is that you would have to carefully craft it out and also keep in mind cross-browser compatibilities.

Anyway, just to show how it could be done:

Demo 2: http://jsfiddle.net/abhitalks/2mx6b/2/

CSS:

.curved {
    width: 400px;
    height: 200px;
    border-radius: 0 0 40% 40%;
    background: 
        -webkit-radial-gradient(-19% center, circle, orange 0, orange 124px, transparent 50px), 
        -webkit-radial-gradient(119% center, circle, orange 0, orange 124px, transparent 50px) #ccc;
    background-clip: padding-box;
}

Note: Regarding your comment: No. You can't actually use transparent in any of the proposed solutions. The reason being that either the parent element's background would bleed through or in case of multiple backgrounds, the lower background in stacking order will then bleed through.

来源：https://stackoverflow.com/questions/23904255/css-borders-bend-inside

标签

html

css

responsive-design