CSSだけでクリップで留めた表現をつくってみた

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