Фон с радиусом-верхом внутри

У кого-нибудь есть идея, как применить фон (в css), как вы можете видеть на прикрепленной картинке?

Спасибовведите здесь описание изображения


css css-shapes
person bidou88    schedule 04.12.2014    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Что-то вроде этого?

#wrapper {
    position: relative; /* position:absolute needs a relative parent */
}
#main {
    width: 100px;
    height: 50px;
    background-color: green;
    text-align: center;
}
#cutout {
    width: 100px;
    height: 50px;
    border-radius: 50px / 25px; /* half of width / half of height
                                http://css-tricks.com/the-shapes-of-css/
                                remember to add vendor prefixes if necessary */
    background-color: white;
    position: absolute;
    top: -30px; /* should be -25px, but a little padding looks nicer */
}
<div id='wrapper'>
    <div id='cutout'></div>
    <div id='main'><br>div</div>
</div>

person tckmn    schedule 04.12.2014

arrow_upward
0
arrow_downward

Посмотрите DEMO.

<div id="wrapper">
<div id="inner"></div>
</div>


#wrapper {
width: 600px;
height: 300px;    
margin: auto;
margin-top: 50px;
background-color: green;
overflow: hidden;
}

#inner {
width: 1200px;
height: 1200px;
border-radius: 600px;
background-color: #fff;
position: relative;
top: -1100px;
left: -300px;
}
person kapantzak    schedule 04.12.2014