How to make rounded corner cut-out using CSS?

Question

I'd like to make something that looks like the below image using CSS:

I'm at a total loss on how to do that. Might someone help?

Answer 1

This can be done using two elements or one element and a pseudo-element:

HTML:

<div></div>

CSS:

div { position:relative; background-color:#333; padding:20px;
      margin:20px; float:left; }

div:before { content:""; display:block; padding:5px; background-color:#f60;
             border:2px solid white; position: absolute; top:-2px;
             right:-2px;}​

http://jsfiddle.net/Vv6Eb/

---

Update:

With border-top-right-radius:

http://jsfiddle.net/Vv6Eb/1/

Or, border-bottom-left-radius:

http://jsfiddle.net/Vv6Eb/4/

Answer 2

<div id="page">
         <div id="up">

        </div>
        <div id="logo">
            <div id="logobody"></div>    
        </div>
        <div id="down">

        </div>

</div>​

#page{
    margin:30px auto;
    width:500px;
    height:auto;
    border-radius:10px;
    border:2px red thin;
    background:white;
    overflow:hidden;
}
#logo{
   float:right;
    width:100px;
    height:70px;
    border-radius:10px;
    background:white;
    margin-top:-70px;
    margin-right:10px;
}
#up{

    width:80%;
    height:60px;
    border-radius-top:10px;
    background:gray;

}
#down{
    margin-top:-0px;
    margin-right:-10px;
    width:100%;
    height:60px;
    border-radius: 0px 10px 10px 10px;
    background:gray;

}

#logobody{
    border:2px blue solid;
    margin :auto;
    width:85px;
    height:50px;
    margin-top:10px;
    margin-right:0px;
    border-radius:7px;
}
​

jsFiddle