css - CSSで角丸切り抜きを作るには？

Question

CSSを使って下の画像のようなものを作りたいです。

私はそれを行う方法について完全に途方に暮れています。誰か助けてくれる？

Answer 1

これは、2 つの要素、または 1 つの要素と疑似要素を使用して実行できます。

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/

---

アップデート：

とborder-top-right-radius:

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

または、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;
}
​

jsフィドル

Answer 3

float を使用します。 http://www.w3schools.com/css/css_float.asp

<div style="background-color:#000; height:500px; width:500px; margin-bottom:10px;">

<div style="background-color:#FFF; float:right; height:100px; width:100px; margin-right:10px; margin-top:10px;"></div>

</div>


<div style="background-color:#000; height:500px; width:500px; position:relative;">

<div style="background-color:#FFF; position:absolute; right:0px; height:100px; width:100px; margin-right:10px; margin-top:10px;"></div>

</div>​

インライン スタイルはお勧めできないので、スタイルシート ファイルにスタイルを書きたいと思うかもしれません。float を使用すると、テキストが div タグをラップします。秒のコードスタック