線の途中で楕円を出っ張らせる方法が知りたい（css）

Question

閲覧いただきまして、ありがとうございます。

CSSを使って下記のような形を実現したいと考えています。
デザインではよくあるような、線の途中で円が出っ張っているようなものです。

吹き出しを使って（:afterや:before）実現てみようと試みてはみたのですが、三角のものの例しか出て来ずうまくいきません。

ざっくりとした質問で恐縮ではございますが、もしどなたか綺麗に楕円の出っ張りをうまくCSSで実現する方法をご存知の方がいらっしゃれば、お知恵を拝借いただければと思います。

Answer 1

like this?

.a::before{
  position: absolute;
  top: calc(-1em - 2px);
  left: 50%;
  transform: translateX(-50%);
  content: '';
  width: 2em;
  height: 1em;
  background: #fff;
  border-radius: 2em 2em 0 0 ;
  border: 2px solid #000;
  border-bottom: 0px;
}
.a::after{
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  content: '';
  width: 2em;
  height: 1em;
  background: #fff;
  border-radius: 2em 2em 0 0 ;
  border: 2px solid #000;
  border-bottom: 0px;
}

Comments

[yamady]

Thanks a lot. Looks perfect :)