See the Pen CSS CLIP 1
斜めにするのは面倒だったのでやってません。 これでもなかなかいい感じの可愛さではないか。 CSSはこんな感じ/* 通常(縦向き) */ .clip:before { content: ""; border-top-left-radius: 100%; border-top-right-radius: 100%; border-top: 3px solid #000000; border-right: 3px solid #000000; border-left: 3px solid #000000; width: .6em; height: 0.8em; position: absolute; top: -1em; right: .5em; } .clip:after { content: ""; border-bottom-left-radius: 100%; border-bottom-right-radius: 100%; border-bottom: 3px solid #000000; border-right: 3px solid #000000; border-left: 3px solid #000000; width: .42em; height: 1.8em; position: absolute; top: -0.3em; right: .5em; } /* 横向き */ .clip-horizontal:before { content: ""; border-top-right-radius: 100%; border-bottom-right-radius: 100%; border-top: 3px solid #000000; border-right: 3px solid #000000; border-bottom: 3px solid #000000; width: .6em; height: .7em; position: absolute; top: 1em; right: -.8em; } .clip-horizontal:after { content: ""; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-top: 3px solid #000000; border-left: 3px solid #000000; border-bottom: 3px solid #000000; width: 1.5em; height: 0.42em; position: absolute; top: 1em; right: 0; }擬似クラスで描写して、絶対位置で右上に表示してます。 親要素(.clipをつけた要素)のposition: relative; とborder-radius のベンダープレフィックスは忘れないでくださいね。
何か一言あれば!!
質問とかツッコミとかお気軽にコメントしてください。がんばって返します。