如何使用CSS制作圆角切口?

tim*_*son 3 css rounded-corners css3

我想使用CSS制作看起来像下图的内容:

在此输入图像描述 我完全不知道如何做到这一点.有人可以帮忙吗?

xan*_*ded 6

这可以使用两个元素或一个元素和一个伪元素来完成:

HTML:

<div></div>
Run Code Online (Sandbox Code Playgroud)

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;}?
Run Code Online (Sandbox Code Playgroud)

http://jsfiddle.net/Vv6Eb/


更新:

border-top-right-radius:

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

或者,border-bottom-left-radius:

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