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 のベンダープレフィックスは忘れないでくださいね。

何か一言あれば!!

質問とかツッコミとかお気軽にコメントしてください。がんばって返します。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください