Как сверстать такую границу?

Question

[Диман Суворкин]

Answer 1

[Типа Программист]

Добрый день! Я попробовал как-то так:

<div class="container">
      <button>
        Click me
      </button>
    </div>

body, html {
        min-width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
        font: Arial 14px;
      }
      .container {
        width: 100%;
        height: 100px;
        border-bottom: 1px solid yellow;
        position: relative;
      }
      .container button {
        position: absolute;
        bottom: -20px;
        transform: translateX(-50%);
        left: 50%;
      }
      .container::before {
        content: "";
        transform: translateX(-50%);
        bottom: -20px;
        width: 100px;
        height: 20px;
        background: white;
        position: absolute;
        left: 50%;
        border: 1px solid yellow;
        border-top: 0px;
      }

Ну скругления можно потом добавить. Это сам принцип работы. Код не красивый, бистро писал)

Comments

[Диман Суворкин]

Черт возьми, просто перекрыть границу другим блоком. Как я не догадался.. Спасибо

[Типа Программист]

Диман Суворкин, Пожалуйста