Home>

I want to achieve the following form using CSS.
It is like a circle protruding in the middle of a line, as is often the case with designs.

I tried to make it happen using a balloon (: after or: before), but only the triangle example came out and it didn't work.

I'm sorry for the rough question, but if you know how to make a nice ellipse bulge with CSS, I hope you can borrow the wisdom.

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

Related articles