css - 如何使用 CSS 制作圆角切口？

Question

我想使用 CSS 制作如下图所示的内容：

我完全不知道如何做到这一点。有人可以帮忙吗？

Answer 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;
}
​

jsFiddle

Answer 3

使用浮动..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 标签。秒码栈