Как сделать продолжение кнопки, которое уйдет под блок, как показано на скриншоте

Question

У меня есть вот такой код:

    <div class="head-account">
        <button id="lc-btn">Личный кабинет</button>
        <button id="app-btn">Заявки</button>
        <button id="admin-btn">Админ панель</button>
    </div>

И стили:

.head-account {
display: flex;
align-items: center;
background-color: #262626;
border-radius: 10px 10px 0 0;
box-shadow: inset 0px -23px 25px -30px #282828;
}

.head-account button {
padding: 10px;
font-size: 20px;
font-family: GolosText;
font-weight: 500;
border: none;
border-radius: 10px 10px 0 0;
background: none;
cursor: pointer;
}

#lc-btn {
background-color: #9add09;
color: #000;
font-weight: 500;
box-shadow: inset 0px -23px 25px -30px #282828;
}

Answer 1

Задача тривиальна, может решаться разными способами и зависит от того, какими будут остальные стили, вёрстка и логика.

body { background-color: #191919; }

.head-account {
  display: flex;
  flex-flow: row wrap;
  border-radius: .75em;
  overflow: hidden;
  color: #fff;
  background-color: #262626;
  box-shadow: inset 0 -23px 25px -30px #282828;
}

.head-account > [type="radio"] { display: none; }

.head-account label {
  padding: .75em;
  border-radius: .75em .75em 0 0;
  box-sizing: border-box;
  font: 500 20px 'GolosText', sans-serif;
  background-color: #9add0900;
  box-shadow: inset 0 -23px 25px -30px #282828, 0 23px 0 #71a20700;
  cursor: pointer;
}
.head-account>[type="radio"]:checked + label {
  color: #000;
  background-color: #9add09;
  box-shadow: inset 0 -23px 25px -30px #282828, 0 23px 0 #71a207;
}

.account-content { width: 100%; }

.content {
  min-width: 100%;
  width: 100%;
  padding: 1.5em;
  border-radius: .75em .75em 0 0;
  box-sizing: border-box;
  background-color: #2b2b2b;
}

[name="tab"]:nth-of-type(1):not(:checked)~.account-content>.content:nth-of-type(1),
[name="tab"]:nth-of-type(2):not(:checked)~.account-content>.content:nth-of-type(2),
[name="tab"]:nth-of-type(3):not(:checked)~.account-content>.content:nth-of-type(3) {
  display: none;
}

.card {
  display: flex;
  flex-flow: row wrap;
  padding: .5em;
  border-radius: .5em .5em 0 0;
}

.card-btn {
  padding: .5em;
  border-radius: .75em .75em 0 0;
  font: 500 20px 'GolosText', sans-serif;
  color: #fff;
  box-shadow: 0 23px 0 #71a20700;
}
.card-btn.active {
  color: #000;
  background-color: #9add09;
  box-shadow: 0 23px 0 #9add09;
}
.card-btn img { width: 24px; }

.card-content {
  display: flex;
  align-items: center;
  gap: 1.5em;
  width: 100%;
  padding: 2.5em;
  border: 4px solid #9add09;
  border-radius: .75em;
  box-sizing: border-box;
  background-color: #2b2b2b;
}

.card-avatar {
  width: 100px;
  aspect-ratio: 1;
  border: 4px solid #282828;
  border-radius: 50%;
  box-shadow:  0 0 0 4px #9add09;
}

.card-name { font: 700 36px/.75em 'GolosText', sans-serif; color: #fff; }
.card-name span { font: 400 16px/.75em 'GolosText', sans-serif; }

<div class="head-account">
  <input type="radio" name="tab" id="lc-btn" checked><label for="lc-btn">Личный кабинет</label>
  <input type="radio" name="tab" id="app-btn"><label for="app-btn">Заявки</label>
  <input type="radio" name="tab" id="admin-btn"><label for="admin-btn">Админ панель</label>
  <div class="account-content">
    <div class="content">
      <div class="card">
        <div class="card-btn active"><img src="https://assets-global.website-files.com/6257adef93867e50d84d30e2/636e0a6ac3c481f273141736_icon_clyde_black_RGB.png"> DISCORD</div>
        <div class="card-btn">Выйти</div>
        <div class="card-content">
          <img class="card-avatar" src="https://64.media.tumblr.com/1a86504733c86f0c41e7f01530814f81/6b93c8ac86b07a0d-ab/s128x128u_c1/aeddebb1e5e2ef8edb86d67d3a4c43f0e30b0f84.pnj">
          <p class="card-name">Slemmi<br><span>@slemmi</span></p>
        </div>
      </div>
    </div>
    <div class="content">Заявки</div>
    <div class="content">Админ панель</div>
  </div>
</div>

БЛОГ НА HUSL

Как сделать продолжение кнопки, которое уйдет под блок, как показано на скриншоте

Ответы (1 шт):