如何使用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/